WebStorage Local Storage for HTML5

HTML5 supports two types of webstorage, one is persistent local storage (localstorage), and the other is session-level local storage (sessionstorage).

1 session-level local storage: sessionstorage

Added a JS object in HTML5: Sessionstorage; This object allows you to manipulate the session-level webstorage stored in the browser directly. The data stored in Sessionstorage is first in the form of Key-value, and it is related to the browser's current session, and when the session ends, the data is automatically purged, similar to a cookie that does not have an expiration time set.

Sessionstorage provides four ways to assist us in the operation of local storage.

• (1) SetItem (key,value): Add local storage data. Two parameters, very simple will not say.
• (2) GetItem (key): Gets the corresponding value by key.
• (3) RemoveItem (key): Delete local data via key.
• (4) Clear (): Clears the data.

    <script type="text/javascript">        //添加key-value 数据到 sessionStorage        sessionStorage.setItem("demokey", "http://blog.itjeek.com");        //通过key来获取value        var dt = sessionStorage.getItem("demokey");        alert(dt);        //清空所有的key-value数据。        //sessionStorage.clear();        alert(sessionStorage.length);    </script>


For JS to learn and debug must have Chrome debugging tools to assist in order to do more. Of course, chrome is also my favorite web development aids, very simple F12 shortcut keys immediately open the tool, including IE is also this shortcut key. You can view the Sessionstorage data in the current browser.

2 Permanent local storage: localstorage

The Localstorage object is added to the latest JS API to allow users to store data from permanently stored web-side. And the data is not sent to the backend server with the HTTP request, and the size of the stored data is not considered, Because the HTML5 standard requires the browser to support at least 4MB. This is a completely disruptive cookie limitation and provides very handy technical support for Web applications to store complex user trace data locally. Then the next one to introduce the localstorage of the common methods, of course, basically with the sessionstorage is consistent.

Localstorage provides four ways to assist us in the operation of local storage.

• (1) SetItem (key,value): Add local storage data. Two parameters, very simple will not say.
• (2) GetItem (key): Gets the corresponding value by key.
• (3) RemoveItem (key): Delete local data via key.
• (4) Clear (): Clears the data.

                                <script type="text/javascript">        //添加key-value 数据到 sessionStorage        localStorage.setItem("demokey", "http://blog.itjeek.com");        //通过key来获取value        var dt = localStorage.getItem("demokey");        alert(dt);        //清空所有的key-value数据。        //localStorage.clear();        alert(localStorage.length);    </script>


           

Finally, the data stored with WebStorage is in string format, and if you are an array,

Convert the array to a string using the json.stringify () function first.

When you take it out, use json.parse () to convert the string to an array.

Otherwise, the "array ()" is displayed

WebStorage Local Storage for HTML5