Localstorage Usage Summary

First, what is Localstorage, sessionstorage

In HTML5, a new localstorage feature is added, which is primarily used as a local store to solve the problem of insufficient cookie storage space (4k per cookie in the cookie). Localstorage in the General browser support is 5M size, this in different browsers localstorage will vary.

Second, the advantages and limitations of Localstorage

Advantages of Localstorage

1, Localstorage extended the 4K limit of cookies

2, Localstorage will be able to store the first request data directly to the local, this is equivalent to a 5M size for the front-end page of the database, compared to the cookie can save bandwidth, but this is only in the higher version of the browser is supported

The limitations of Localstorage

1, browser size is not uniform, and in IE8 above the version of IE support Localstorage this attribute

2. All browsers currently restrict the value type of localstorage to string type, which requires some conversion to the JSON object type that we are more familiar with everyday

3, Localstorage in the browser's privacy mode is not readable

4, Localstorage is essentially the reading of the string, if the storage of more content will consume memory space, will cause the page card

5, Localstorage can not be crawled by reptiles to

The only difference between Localstorage and Sessionstorage is that localstorage belongs to persistent storage, and sessionstorage is the key value pair in Sessionstorage is emptied when the session ends.

Here we analyze with localstorage.

Third, the use of localstorage

Localstorage Browser Support situation:

Here to make a special statement, if the use of Internet Explorer, then you have to UserData as storage, here is the main explanation is localstorage content, so userdata do not do too much explanation, and to the blogger personal views, It is not necessary to learn the use of UserData, because the current ie6/ie7 belongs to the elimination of the position, and in today's many page development will involve HTML5\CSS3 and other emerging technologies, so in the use above generally we do not go to the compatibility

First, when using localstorage, we need to determine whether the browser supports localstorage this property

if (! Window.localstorage) {            alert ("Browser does not support Localstorage");        } else{            //main logic business        }

Localstorage write, there are three ways towrite Localstorage , here is a brief introduction

if (! Window.localstorage) {            alert ("Browser does not support Localstorage");        } else{            var storage=window.localstorage;            Write a field            storage["a"]=1;            Write b field            storage.b=1;            Write C field            Storage.setitem ("C", 3);            Console.log (typeof storage["a"]);            Console.log (typeof storage["B"]);            Console.log (typeof storage["C");        }

The results after the run are as follows:

Here to specifically explain the use of localstorage also follow the same-origin strategy, so different sites directly can not share the same localstorage

Finally, the results are printed on the console:

I wonder if you have noticed that the type of int is just stored, but the print is a string type, which is related to the characteristics of localstorage itself, and localstorage only supports string-type storage.

Read from Localstorage

if (!window.localstorage) {            alert ("Browser does not support Localstorage");        } else{            var storage=window.localstorage;            Write a field            storage["a"]=1;            Write b field            storage.a=1;            Write C field            Storage.setitem ("C", 3);            Console.log (typeof storage["a"]);            Console.log (typeof storage["B"]);            Console.log (typeof storage["C"]);            The first method reads            var a=storage.a;            Console.log (a);            The second method reads            var b=storage["B"];            Console.log (b);            The third method reads            the Var c=storage.getitem ("C");            Console.log (c);        }

This is three kinds of localstorage read, in which the official recommendation is Getitem\setitem these two methods to access it, do not ask me why, because this I do not know

I said before Localstorage is the equivalent of a front-end database of things, the database is mainly add and delete to check the four steps, where the reading and writing is equivalent to increase, check the two steps

Now let's talk about the two steps of Localstorage's deletion and change.

This step is better understood, the idea is the same as changing the value of global variables, here we take one as an example to explain briefly

if (!window.localstorage) {            alert ("Browser support Localstorage");        } else{            var storage=window.localstorage;            Write a field            storage["a"]=1;            Write b field            storage.b=1;            Write C field            Storage.setitem ("C", 3);            Console.log (STORAGE.A);            Console.log (typeof storage["a"]);            Console.log (typeof storage["B"]);            Console.log (typeof storage["C"]);            /* Split Line */            storage.a=4;            Console.log (STORAGE.A);        }

On the console, we can see that the a key has been changed to 4.

Deletion of Localstorage

1, the localstorage of all the content to clear,

var storage=window.localstorage;
Storage.a=1;
Storage.setitem ("C", 3);
Console.log (storage);
Storage.clear ();
Console.log (storage);

2. Remove a key value pair from the Localstorage

var storage=window.localstorage;            storage.a=1;            Storage.setitem ("C", 3);            Console.log (storage);            Storage.removeitem ("a");            Console.log (STORAGE.A);

Console View Results

Localstorage Keys to get

var storage=window.localstorage;            storage.a=1;            Storage.setitem ("C", 3);            for (Var i=0;i<storage.length;i++) {                var key=storage.key (i);                Console.log (key);            }

Use the key () method to get the corresponding key by entering and exiting the index

Iv. Localstorage Other matters needing attention

In general, we will store the JSON in Localstorage, but the localstorage will automatically convert the Localstorage into a string form

At this point we can use the Json.stringify () method to convert the JSON to a JSON string

Example:

if (!window.localstorage) {            alert ("Browser support Localstorage");        } else{            var storage=window.localstorage;            var data={                name: ' Xiecanyong ',                sex: ' Man ',                hobby: ' Program '            };            var d=json.stringify (data);            Storage.setitem ("Data", d);            Console.log (Storage.data);        }

To convert the JSON string to a JSON object after reading, use the Json.parse () method

var storage=window.localstorage;            var data={                name: ' Xiecanyong ',                sex: ' Man ',                hobby: ' Program '            };            var d=json.stringify (data);            Storage.setitem ("Data", d);            Converts a JSON string into a JSON object output            var json=storage.getitem ("Data");            var jsonobj=json.parse (JSON);            Console.log (typeof Jsonobj);

Print it out as Object

It is also important to note that other types of read-out are also converted

Localstorage Usage Summary