Study and summary of Localstorage

A. a property defined on the Localstorage:window object that is the Storage object. A persisted associative array, which is indexed using a string, and the stored value is also in the form of a string.      HTML5 uses JavaScript to store and access data .

The data stored by the localstroage is persistent, unless the WEB app can delete the stored data, or the user deletes it by setting the browser settings, otherwise the data is consistently maintained on the user's computer. the scope of the localstorage is limited to the document source level (the document source is determined by the Protocol, hostname, and port three, as long as one is different, which means that the document source is different),localstroage scopes are also restricted by browser vendors, and the localstroage data obtained on different browsers is different.

two. Storage API

Localstroage is usually used as a normal JavaScript object: You can read the value by setting the property to store the string value and querying the property.

Localstorage itself with methods have

(1) Add key value pair:localstorage.setitem (key,value); if key exists, update value

(2) Get key value:Localstorage.getitem (key); returns null if key does not exist

(3) Delete the key value pair:localstorage.removeitem (key). Once deleted,key corresponding data will be deleted .

(4) Clear all key-value pairs:localstorage.clear (). Sometimes it is too cumbersome to use RemoveItem to remove each other , you can use clear, and the consequences of doing this are to clear all localstorage data saved by the object

(5) Gets the localstorage property name (key name):localstorage.key (index).

(6) Storing JSON Format Data

Json.stringify (data) converts an object into a JSON -formatted data string , returning the converted string

Json.parse (data) parses the object into objects, returning the parsed object

For example

var infos = {Author: "Xiyin", "description": "Front end learning", "rating": 001};  Localstorage.setitem ("Infos", Json.stringify (infos));  Infos = Json.parse (Localstorage.getitem ("infos"));  document.write (infos.author+ ' <br> ');  document.write (infos.description+ ' <br> '); document.write (infos.rating);

Realize:

650) this.width=650; "Src=" http://s1.51cto.com/wyfs02/M01/7E/9A/wKioL1cFpqXzSJ2dAAAT9wDRtZ4203.jpg " Title= "4.jpg" alt= "Wkiol1cfpqxzsj2daaat9wdrtz4203.jpg"/>

Locally stored:

650) this.width=650; "Src=" http://s3.51cto.com/wyfs02/M01/7E/9E/wKiom1cFpjHRiCx2AABlObW9c7k123.jpg " Title= "5.jpg" alt= "Wkiom1cfpjhricx2aablobw9c7k123.jpg"/>

There is a property that is not the same as the normal object length:

Gets the number of key-value pairs saved in Localstorage:localstorage.length

three. example

 $ (function () {     var ullistobj=document.getelementsbyclassname (' List-group ');     //because Getelementsbyclassname return is an array of objects, use ullistobj[0]       ullistobj[0].addeventlistener ("click", Fun,false);     function fun ( Event) {        event=event| | window.event;         var target= event.target| | Event.srcelement;         switch (target.id) {             case  "Item1":                 getvalue ();                     break;             case  "item2":  &nbsP;             getvalue ();                    break;             case  "Item3":                getvalue ();                     break;             case  "Item4":                 getvalue ();                 break;             case  "ITEM5":                 getvalue ();                 break;    }};//get Btn object, click to display the browsing history of local storage    var btnobj= document.getElementById (' btn ');     btnobj.addeventlistener ("click", Fun1,false);     function fun1 () {      init_getlocalstorage ();     }       })   //page loaded, fetch data from local localstorage, and display   Function init_getlocalstorage () {           for (var  i=0;i<localstorage.length;i++) {                                var name=localstorage.key (i); //  get Localstorage property name                             if  (name ==   "Ullist") {                       var all=localstorage.getitem ("Ullist");                        Var list=all.split (";");   //the string that is stored in the ullist, with ";" broken out, to form an array string.                        //let local storage of data, time is the top 6, for the back of 6, delete                                           if (list.length>6) {                                                     for (var j=6;j<list.length-1;j++) {                                    delete list[j];                            }                         }                           //based on the segmented array string, The loop output is on the page.                                            for (var j=0;j<list.length-1;j++) {                                                                     $ (". List-group1"). Append (' <li class= ' list-group-item ' > ' + ' <a class= ' A1 ' > ' + list[j]+ ' </a> ' + ' </li>  ');                                                               }                       }                        }                };         //store clicked Value in local       function getvalue () {       var target= event.target| | Event.srcelement;      if (!localstorage.getitem ("Ullist")) {                 localstorage.setitem ("Ullist", ".");                }           //remove the value named Ullist         var value=localstorage.getitem ("Ullist");         //get the text value content of the current click       var liname=target.innerHTML;        //will now get the text value, passed in the heavy function, to delete the duplicate value,         var quchonglist=quchong (value,liname);         // Creates a new string by stitching the returned local string with the current clicked text value         var value1=target.innerhtml + '; ' +quchonglist;        //Store This new string in Ullist           localstorage.setitem ("Ullist", value1);        }     //Remove the data that is stored locally because of repeated clicks, and save the current latest click Record       function  quchong (value,liname) {              var list=value.split (";");                            for (var i=0;i<list.length;i++) {                     if (list[ I]==liname) {                      //the value of the current deposit is not the same as the local value, and if the same, delete the element                           List.splice (i,1);                    }              }            var finshstring=list.join (";"); /Reconnect the final array string to a string                 return  finshstring;        };

Page:

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M01/7E/9E/wKiom1cFpprg5hlDAAAp8OyqlNU307.jpg "titl E= "1.jpg" alt= "wkiom1cfpprg5hldaaap8oyqlnu307.jpg"/>

Click to view browsing history:

650) this.width=650; "Src=" http://s1.51cto.com/wyfs02/M01/7E/9A/wKioL1cFp1eQYoCMAAA5qKlARdo575.jpg " Title= "2.jpg" alt= "wkiol1cfp1eqyocmaaa5qklardo575.jpg"/>

Locally stored:

650) this.width=650; "src=" http://s4.51cto.com/wyfs02/M00/7E/9E/wKiom1cFprmhwRWIAABlH1rqQ-k157.jpg "title=" 3.jpg " alt= "Wkiom1cfprmhwrwiaablh1rqq-k157.jpg"/>

Four. Summary:

Here is a simple summary of the localstorage Storage of local data used in your project.

Local Storage (localstorage && sessionstorage) is a HTML5 of several forms of storage (local storage ( Localstorage && sessionstorage, offline cache (applicationcache),IndexedDB and the Websql Localstorage)Onefor persistent local storage, the data will never expire unless the data is actively deleted. is designed to store data locally, for larger capacity storage. It is much more convenient than the use of cookies mentioned in the previous article <js to learn and use cookies in >.

This article is from the "dream need to adhere to" blog, please be sure to keep this source http://xiyin001.blog.51cto.com/9831864/1761140

Study and summary of Localstorage