HTML5 Study Notes-LocalStorage local storage, html5-localstorage

HTML5 Study Notes-LocalStorage local storage, html5-localstorage

1. Local Storage

Before HTML5 was born, if a website wants to store data on a browser, it can only use cookies, but there are many restrictions on using cookies.

Cookie problems:

1. The cookie size is limited to around 4 K (different browsers)

2. Each time a cookie is sent along with an HTTP request (many unwanted cookies are also sent together)

Local Storage:

1. The localStorage size is limited to 5 MB (different browsers)

2. localStorage will not be sent along with HTTP requests

Ii. Session-level local storage-SessionStorage

SessionStorage: when a user browses a website, the validity period of the session object is from the start of the website to the end of the website.

SessionStorage provides four methods for local storage operations.

1.SetItem (key, value); Add local storage data

2.GetItem (key); Get the corresponding value through the key

3.RemoveItem (key); Delete the corresponding value through the key

4.Clear (); Clear all local session data (under this domain name only)

1 <script type = "text/javascript"> 2 // Add key-value data to sessionStorage 3 sessionStorage. setItem ("name", "pity White"); 4 sessionStorage. setItem ("job", "front-end"); 5 6 // obtain value 7 var name = sessionStorage using the key. getItem ("name"); 8 9 console. log (name); // loose white 10 console. log (sessionStorage. length); // 211 12 // Delete value13 sessionStorage by key. removeItem ("job"); 14 15 console. log (sessionStorage. length); // 116 17 // clear all k Ey-value data. 18 sessionStorage. clear (); 19 20 console. log (sessionStorage. length); // 021 </script>

 

Iii. Permanent local storage-LocalStorage

LocalStorage: used for persistent local storage. Unless data is actively deleted, the data will never expire.

LocalStorage provides four methods for local storage.

1.SetItem (key, value); Add local storage data

2.GetItem (key); Get the corresponding value through the key

3.RemoveItem (key); Delete the corresponding value through the key

4.Clear (); Clear all local data

1 <script type = "text/javascript"> 2 // Add key-value data to sessionStorage 3 localStorage. setItem ("name", "pity White"); 4 localStorage. setItem ("job", "front-end"); 5 6 // obtain value 7 var name = localStorage through key. getItem ("name"); 8 9 console. log (name); // loose white 10 console. log (localStorage. length); // 211 12 // use the key to delete value13 localStorage. removeItem ("job"); 14 15 console. log (localStorage. length); // 116 17 // clear all key-value data. 18 localStorage. clear (); 19 20 console. log (localStorage. length); // 021 </script>

 

Iv. Summary

The difference between localStorage and sessionStorage is temporary storage and long-term storage.

You may have seen the following statement:

1 <script type = "text/javascript"> 2 // set name3 localStorage. name = "pity White" 4 5 // delete name6 delete localStorage. name7 </script>

The method directly assigned above can indeed implement the function, but it is defined in the official document as an insecure writing method, so do not use this method, using the method provided by localStorage.