How to use LocalStorage and SessionStorage

This article shared everyone about how to use LocalStorage and SessionStorage. Xiaobian feels quite practical, so share it with you to do a reference. Let’s take a look at Xiaobian.

One, what is localStorage, sessionStorage

In HTML5, a LocalStorage feature is added, which is mainly used as a local storage, solving the cookie storage space. Problem (4K of each cookie in cookie), the general browser in LocalStorage is 5M size, which will be different in different browsers.

During the advantages and limitations of LocalStorage

LocalStorage (

1, localStorage expands the 4K restriction of cookie

2, LocalStorage can The data requested is stored directly to the local, which is equivalent to a 5M size database for the front-end page, which can save bandwidth compared to cookie, but this is only supported in a high version of the browser


1, the size of the browser is not uniform, and the IE version above IE8 supports localStorage attribute

2. Currently, all browsers will put LocalStorage The value type is defined as a String type. This is required to convert

3, LOCALSTORAGE in the browser’s privacy mode is unreadable

4 LocalStorage is essentially a string read, if the memory content will consume memory space, it will result in page change card

5, LocalStorage can’t be caught by crawler

localStorage SESThe only difference between SionStorage is that localStorage belongs to permanent storage, while sessionStorage is when the session is over, the key value pairs in SessionStorage will be emptied

Here we take localStorage

Three, LocalStorage

LocalStorage’s browser support:

This should be specifically declared. If you use the IE browser, then UserData is used as a storage, mainly explaining LocalStorage The content, so UserData does not explain too much, and it is not necessary to learn userData’s use, because the current IE6 / IE7 is eliminated, and many page development now They will involve HTML5 \ CSS3 and other emerging technologies, so we will not go to it in use

When using LocalStorage, we need to judge whether the browser supports localStorage this property
  if (! Window.localStorage) {Alert ("Browser Supports LocalStorage"); Return False;} else {// Main Logic Business  
 LocalStorage writes, there are three ways to write localStorage, here, let's introduce if (! Window.localStorage) {Alert ("Browser supports localStorage"); return false;} else {var Storage = WindOw.localStorage; // Write a Field Storage ["a"] = 1; // Write B field storage.a = 1; // Write a C field Storage.SetItem ("C", 3); console. LOG (TypeOf Storage ["a"]); Console.Log (TypeOf Storage ["TypeOf Storage [" C "]);}   
I don’t know if you have a reader noticed that it has just been stored in an int type, but printing is a string type. This is related to the characteristics of LocalStorage itself. LocalStorage only supports String type storage.

LocalStorage read

if (! Window.localStorage) {Alert (“Browser supports localStorage”;} else {var storage = window.localStorage; // Write a Field Storage [“a”] = 1; // Write the B field storage.a = 1; // Write a C field Storage.SetItem (“C”, 3); console.log (Typeof Storage [“a”]);Console.log (“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 VAR C = Storage.GetItem (“c”); console.log (c); }
 This is three kinds of reading of LocalStorage, where the official recommended is GetItem \ setItem \ setitem to access it, don't ask me why, because this I don't know   I have said that localStorage is something equivalent to a front-end database. The database is mainly to increase these four steps, and the reading and writing here are equivalent to increase, check These two steps 
Let’s talk about the deletion of localStorage, change these two steps

Change this step is better understood, the idea is the same as the value of the global variable, here Let’s take a brief explanation with an example

f (! Window.localStorage) {Alert (“Browser Support LocalStorage”;} else {var storage = window.localStorage ; // Write a fieldStorage [“a”] = 1; // Write the B field storage.b = 1; // Write the 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);}

Thank you for reading! About LocalStorage and sessionStorage how to share it here, I hope that the above can help everyone, let everyone learn more. If you feel that the article is good, you can share it out to let more people see it!
© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment