Explanation of local storage of AngularJs data and angularjs Storage

Explanation of local storage of AngularJs data and angularjs Storage

1. Create a factory to store and retrieve your data (you can create a js file separately and name it according to the semantics such as dataService. js. Then introduce this JS file on your homepage)

<! -- Introduce it to your home page --> <script src = "dataService. js "> </script> creates a factory 'use strict '; angular. module ('myapp '). factory ('datadservice', ['$ Windows', function ($ window) {return {// store a single property set: function (key, value) {$ window. localStorage [key] = value;}, // read a single attribute get: function (key, defaultValue) {return $ window. localStorage [key] | defaultValue;}, // stores the object. setObject: function (key, value) {$ window is stored in JSON format. localStorage [key] = JSON. stringify (value) ;}, // read object getObject: function (key) {return JSON. parse ($ window. localStorage [key] | '{}') ;}}]);

2. Inject the method module [datadService] You created into the controller. The following controller is [productCtrl]. Next we will create a set. js file with the following code:

'Use strict '; angular. module ('myapp '). controller ('productctrl ', [' $ scope ', 'datadservice', function ($ scope, datadService) {$ scope. appiAppType = 1; // $ scope. the value assignment of appiAppType can also be performed through $ http. post or $ http. assign values to parameters returned by methods such as get //, for example: // $ http. post ('here is the interface you want to access [URL] ', here is the parameter you want to upload ). success (function (data) {// $ scope. appiAppType = data; //}); datadService. setObject ("lodinData", $ scope. appiAppType); // store the data you obtained to the datadService you created earlier, here [lodinData] Is the KEY (in my personal understanding, you store the data in the big box. This box is [datadService ], in order to facilitate searching for the desired data in this box, a small tag is provided, that is, [lodinData])}].

3. For how to obtain the stored data in different controls, create a get. js file with the following code:

'Use strict '; // put the previously created module, that is, the data-packed box [datadService], into this controller (that is, module injection) // next, you can use the previously set label lodinData and the getObject ('key') method to obtain the data you want. // The specific implementation is just a line of code: datadService. getObject ('lodindata'); "NOTE: Take the box out (datadService) and use (getObject) to get the data under your (lodinData) Tag" angular. module ('myapp '). controller ('completectrl ', [' $ scope ', 'datadservice', function ($ scope, datadService) {// here we get the data that has been saved above: [datadService. getObject ('lodindata');] and assigns this data value to [$ scope. loginList] $ scope. loginList = datadService. getObject ('lodindata'); // you can print $ scope here. loginList to see what it is. alert (JSON. stringify ($ scope. loginList)}]);

The above is all the content of this article. I hope this article will help you in your study or work. I also hope to provide more support to the customer's home!