Shulou(Shulou.com)06/03 Report--

This article will explain in detail what is the use of sessionStorage objects in HTML5. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

HTML5 sessionStorage session storage

SessionStorage is a new session storage object added by HTML5, which is used to temporarily save data from the same window (or tab), which will be deleted after the window or tab is closed. This article mainly introduces the use of sessionStorage (session Storage). Including add, modify, delete and other operations.

1. Introduction 1.1 description

SessionStorage is a new session storage object added by HTML5, which is used to temporarily save data from the same window (or tab), which will be deleted after the window or tab is closed.

This object can be called through window.sessionStorage or sessionStorage in the JavaScript language.

1.2 Features

1) restrictions on homologous policies. If you want to operate on the same sessionStorage between different pages, the pages must be under the same protocol, the same host name, and the same port. (IE 8 and 9 store data only based on the same hostname, ignoring protocol (HTTP and HTTPS) and port number requirements)

2) single label page limit. SessionStorage operations are limited to a single tab where homologous page access can share sessionStorage data.

3) stored locally only. SeesionStorage's data is not sent to the server with the HTTP request, it only takes effect locally, and the data is cleared after the tab is closed. (if you use the recovery tab feature of Chrome, the data of seesionStorage will also be restored.)

4) Storage mode. The storage mode of seesionStorage is key and value. The value of value must be of a string type (a non-string is passed in and will also be converted to a string when stored. The true value is converted to "true").

5) Storage limit: the storage limit varies with different browsers, but most browsers limit the storage limit below 5MB.

You can access the storage limit of the http://dev-test.nemikor.com/web-storage/support-test/ test browser.

1.3 minimum browser version support

Minimum versions of browsers that support sessionStorage: IE8, Chrome 5.

1.4 suitable for the scene

SessionStorage is very suitable for SPA (single-page application), and it is convenient to pass values in various business modules.

two。 Member 2.1 Properties

Readonly int sessionStorage.length: returns an integer representing the number of data items (key-value pairs) stored in the sessionStorage object.

2.2 method

String sessionStorage.key (int index): returns the key name of the index ordinal of the current sessionStorage object. If no null is returned.

String sessionStorage.getItem (string key): returns the value corresponding to the key name (key). If no null is returned.

Void sessionStorage.setItem (string key, string value): this method takes a key name (key) and value (value) as parameters, adds a key-value pair to the storage, and updates its corresponding value if the key name exists.

Void sessionStorage.removeItem (string key): removes the specified key from the sessionStorage object.

Void sessionStorage.clear (): clears all items in the sessionStorage object.

3. Example 3.1 Storage data 3.1.1 uses the setItem () method to store sessionStorage.setItem ('testKey',' this is the value of a test'); / / stores a value 3.1.2 stores sessionStorage ['testKey'] =' this is the value of a test'; 3.2 reads data 3.2.1 takes the value sessionStorage.getItem ('testKey') through the getItem () method; / / = > returns the value corresponding to the test

3.2.2 take a value of sessionStorage ['testKey'] by attribute; / / = > this is the value of a test. 3. 3 stores the Json object

SessionStorage can also store Json objects: when stored, the object is converted to text format through JSON.stringify (), and when read, the text is converted back to the object through JSON.parse ().

Var userEntity = {name: 'tom', age: 22}; / / Storage value: convert the object to the Json string sessionStorage.setItem (' user', JSON.stringify (userEntity)); / / when taking the value: convert the acquired Json string back to the object var userJsonStr = sessionStorage.getItem ('user'); userEntity = JSON.parse (userJsonStr); console.log (userEntity.name) / / = > this is the end of tom's article on "what is the use of sessionStorage objects in HTML5". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.