HTML5 LocalStorage the local storage refresh value is still in, html5localstorage

HTML5 LocalStorage the local storage refresh value is still in, html5localstorage

The biggest difference between the two storage technologies of H5 is the lifecycle.

1. localStorage is a local storage with unlimited storage duration;

2. sessionStorage session storage, data will be lost when the page is closed.

Usage:

LocalStorage. setItem ("key", "value") // Storage

LocalStorage. getItem (key) // value by key

LocalStorage. valueOf () // obtain all values

LocalStorage. removeItem ("key") // delete a single value. Note the quotation marks.

LocalStorage. clear () // delete all data

LocalStorage. length // number of data retrieved

LocalStorage. key (N) // obtain the key value of the nth data

Note: localStorage and sessionStorage are used in the same way as above.

Common summary:

LocalStorage. key = 1; // set the storage name to key and the value is 1.

LocalStorage. removeItem ("key"); // remove the storage key. Remember to enclose the key with quotation marks.

The following is a practical example:

To save the input text content locally to close the browser, the previously entered content is still in the field (often used in phone dingtalk logs, such as leave ).

First, get a text field <textarea> </textarea> On the page. The following is jQuery:

If (! LocalStorage. getItem ("text") // if the window object is located, localStorage is omitted in the preceding window. setItem ("text", ""); // you can check whether the storage space is empty. Otherwise, NULL is returned to indicate that the experience is poor. The if braces here save localStorage. text = localStorage. getItem ("text"); // value $ ("textarea" ).html (localStorage. text); // display $ ("textarea "). there are many keyup (function () {// here, such as blur, change, keydown, and a timer. It is useful for storing multiple fields in localStorage. setItem ("text", $ (this ). val (); // re-store });

The above can implement a practical small function, reflecting that H5 local storage is still very useful. Of course, if there are many fields, the JSON method is provided for use! See the following for information about self-contained networks.

<Script type = "text/javascript"> if (window. sessionStorage) {alert ('OK');} else {alert ('fail ');} // set the sessionStorage value. setItem ('key _ a', 1); // value var key_a = sessionStorage. getItem ('key _ a'); console. log (key_a); // Delete sessionStorage. removeItem ('key _ a'); console. log (sessionStorage. getItem ('key _ a'); // null sessionStorage. setItem ('key _ B ', 1); sessionStorage. setItem ('key _ C', 2); // clear all key values sessionStorage. Clear (); console. log (sessionStorage. key_ B); console. log (sessionStorage. key_c); console. log ('========================='); // set the value and value can also be used. symbol, similar to taking the object property // setting value sessionStorage. key_d = 12; // value: var key_d = sessionStorage. key_d; console. log (key_d); // There is a small difference, if this key does not exist. The return value is undefined, and the return value is null console. log (sessionStorage. key_null); // undefined console. log (sessionStorage. getItem ('key _ null'); // null console. log ('=========== a simple example of an object storage ========'); var obj = {a: 12, b: [1, 2, 3, 4, 5], c: {x: 'A', y: ['bb ', 12, 'cc', {a: 1, B: 2}], z: 1333 }}; sessionStorage. setItem ('page', JSON. stringify (obj); // value: var page = JSON. parse (sessionStorage. getItem ('page'); console. log (page); // array of records for (var I = 0; I <page. b. length; I ++) {console. log (page. B [I]);} // traverses the object, usually in for (var j in page. c) {console. log (page. c [j])} // delete key sessionStorage. removeItem ('page'); </script>

Example: counter. Refresh the page to see the result:

<Div id = "test"> </div> <script> var storage = window. localStorage; if (! Storage. getItem ("pageLoadCount") storage. setItem ("pageLoadCount", 0); storage. pageLoadCount = parseInt (storage. getItem ("pageLoadCount") + 1; // The format must be converted to document. getElementById ("test "). innerHTML = storage. pageLoadCount; // showStorage (); </script>

Note that the local storage of HTML5 can only store strings, and will be automatically converted to strings during storage of any format. Therefore, you need to convert the data type during reading. This is why parseInt must be used in the previous code.

The above is a small part of the HTML5 LocalStorage local storage refresh value, I hope to help you, if you have any questions, please leave a message, xiaobian will reply to you in a timely manner. Thank you very much for your support for the help House website!