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

Automatically selecting checkboxes from an array using ReactJS

Tracking the advancement of synchronous XMLHttpRequest requests

Extjs: How to Select a Node After Creating a Tree Structure

What steps should I take in order to ensure that NPM commands run smoothly within Eclipse?

Creating HTML elements dynamically with attributes based on the `as` prop in React using TypeScript

What is the best way to fetch the title property from my Campaign Contract for displaying it in the render method?

How can we compress videos on an Android device prior to uploading them through a web browser?

Uncertainty surrounding the extent of a button's scope within an Angular application

NextAuth.js in conjunction with nextjs version 13 presents a unique challenge involving a custom login page redirection loop when using Middleware - specifically a

Use JavaScript to dynamically add CSS styles to elements before and after a button wrapper

Utilize jQuery to export HTML or JSON data to an Excel spreadsheet

Is there a distinction between the node commands 'cordova ionic' and 'ionic'? Which command should be utilized?

Using a static function within a library's state function in NextJS is throwing an error: "not a function"

Extract the body.req object within a loop in a Node.js application

Executing the callback function

Why is my npm installation generating an ERESOLVE error specifically linked to karma-jasmine-html-reporter?

Javascript encounters an unforeseen < token

Adjust the size of the Div and its content to fit the dimensions of

Ways to initiate a flip motion

Hmm, I seem to be encountering an error where res.sendStatus is not recognized as a function. What could be causing this