angularjslocal-storagecrudng-storage

Display CRUD table data even after refreshing the page using ngStorage

I have created this CRUD table, I can see table data being stored in web browser's local storage in developer tools, even after editing and removing rows, but I don't know how to save and display the same data even after refreshing the page with all latest updates.

<head>

    <script src="js/angular.min.js"></script>   
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>   

</head>

Please see the attached code in plunker: https://plnkr.co/edit/fvp2kQzxrnkgLsQ1r4i6?p=preview

Solution

  • You have 2 issues to fix.

    First, you've defined vm.$storage = $localStorage yet you continue to attempt to update $localStorage when you should be updating vm.$storage.

    Second, initialize your array like this:

    vm.arr = vm.$storage.arr || [];

    I have forked your plunk