Retrieving saved data from LocalStorage upon page reload

Question

Retrieving saved data from LocalStorage upon page reload

<div ng-repeat="section in filterSections">
    <h4>{{ section.title }}</h4>
    <div class="checkbox" ng-click="loaderStart()" ng-if="section.control == 'checkbox'" ng-repeat="option in section.options">
        <label>
            <input type="checkbox" ng-model="searchParams[section.key][option.key]" value="{{ option.key }}" checked><span></span> {{ option.value }}
        </label>
    </div>
</div>

I am able to access it by using $scope.searchParameters.

To save it, I can use

localStorage.setItem('search', JSON.stringify(cleanedParams));

To retrieve the saved data, I can use

JSON.parse(localStorage.getItem("search"));

One challenge I face is how to restore this data when the page is refreshed. Are there any specific functions or directives that could help with this? I have searched extensively but haven't found a solution tailored to my issue.

javascript angularjs angularjs-scope angularjs-ng-repeat

Answer 1

Answer №1

To manage local storage in AngularJS, consider using the LocalStorageService module.

If you are interested in learning more, visit: https://www.npmjs.com/package/angular-local-storage

Answer 2

To manage local storage in AngularJS, consider using the LocalStorageService module.

If you are interested in learning more, visit: https://www.npmjs.com/package/angular-local-storage

Answer 3

Answer №2

To implement this, start by creating an empty array and then add the desired values to it. From there, you can easily retrieve and manipulate the array elements using a loop.

let myArray = [];
myArray.push(JSON.parse(localStorage.getItem('data')));

Answer 4

To implement this, start by creating an empty array and then add the desired values to it. From there, you can easily retrieve and manipulate the array elements using a loop.

let myArray = [];
myArray.push(JSON.parse(localStorage.getItem('data')));

Answer 5

Answer №3

To simplify handling JSON data, I've integrated ngStorage into my project. You can find more information about it here:

In all parts of my application (controllers, directives, services), I include the $localStorage provider and retrieve the stored data into the $scope:

app.controller("BarCtrl", ["$scope", "$localStorage", function($scope, $localStorage){

   $scope.savedData = $localStorage.dataFromStorage;

}]);

UPDATE: http://jsfiddle.net/Lvc0u55v/2997/

Answer 6

To simplify handling JSON data, I've integrated ngStorage into my project. You can find more information about it here:

In all parts of my application (controllers, directives, services), I include the $localStorage provider and retrieve the stored data into the $scope:

app.controller("BarCtrl", ["$scope", "$localStorage", function($scope, $localStorage){

   $scope.savedData = $localStorage.dataFromStorage;

}]);

UPDATE: http://jsfiddle.net/Lvc0u55v/2997/

Answer 7

Answer №4

After some experimentation, I discovered a simple solution to inject the data directly back into $scope with minimal effort. This line of code did the trick:

$scope.searchParameters=JSON.parse(localStorage.getItem("search"));

Initially, I attempted to manually parse the entire dataset myself, but it proved to be more trouble than it was worth :)

Using the

$scope.$watch('searchParameters', function (newValue, oldValue)

function, I can now monitor changes to the element and update them accordingly in LocalStorage.

Answer 8

After some experimentation, I discovered a simple solution to inject the data directly back into $scope with minimal effort. This line of code did the trick:

$scope.searchParameters=JSON.parse(localStorage.getItem("search"));

Initially, I attempted to manually parse the entire dataset myself, but it proved to be more trouble than it was worth :)

Using the

$scope.$watch('searchParameters', function (newValue, oldValue)

function, I can now monitor changes to the element and update them accordingly in LocalStorage.

Retrieving saved data from LocalStorage upon page reload

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Error: The function res.getHeader is not recognized within the Next.js API environment

Tips for enabling a keypad to restrict input field character limit

Presenting a trio of distinct tables each accompanied by its own unique button option

Change the websocket origin to localhost in a javascript setting

Code for refreshing content using AJAX

Sending multiple unique forms with the same structure using JavaScript and Ajax on a single PHP page

AngularJS factory or filter failing to update properly

What is the process of triggering an action from within getInitialProps?

Personalizing Web Push Alerts (Google Chrome)

What is the best way to implement auto-refreshing with reactQuery?

The data from my API is not showing up in my React application

Using jQuery to retrieve the nth child from a table after dynamically creating it with AJAX

How can I match the date format of d-M-Y using JavaScript regex?

In Backbone.js, specialized events are dispatched to cater to unique needs

Obscure unidentified attribute within JSON error object

navigating through an array with a loop (for)

When you hover over them, Material UI icons shrink in size due to the Border

Revamp the current webpage to display attribute values in textual format

Display historical data upon clicking in AngularJS

How can I stop Jquery Mobile from processing the URL hash?