HTML5 sessionStorage session storage and sessionstorage

HTML5 sessionStorage session storage and sessionstorage

SessionStorage is a new session storage object added to html5. it is used to temporarily save data in the same window (or tab). The data will be deleted after the window or tab is closed. This article describes how to use sessionStorage. Including adding, modifying, and deleting operations.

Directory

1. Introduction

1.1 description

Features 1.2

1.3 Support for the minimum browser version

1.4 applicable scenarios

2. Member

2.1 attributes

2.2 Method

3. Example

3.1 Data Storage

3.2 read data

3.3 store Json objects

 

1. Introduction 1.1

SessionStorage is a new session storage object added to html5. it is used to temporarily save data in the same window (or tab). The data will be deleted after the window or tab is closed.

In JavaScript, you can call this object through window. sessionStorage or sessionStorage.

 

Features 1.2

1) Same-source policy restrictions. If you want to operate on the same sessionStorage between different pages, these 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 host name, ignoring the Protocol (HTTP and HTTPS) and port number requirements)

2) single tab restriction. The sessionStorage operation is restricted in a single tab. On this tab, you can share sessionStorage data for accessing the same page.

3) it is stored locally only. SeesionStorage data is not sent to the server along with the HTTP request. It takes effect locally and is cleared after the tab is closed. (If Chrome is used to restore the tab, seesionStorage data is also restored ).

4) storage method. SeesionStorage uses key and value storage. The value must be of the string type (when a non-string is input, it is also converted to a string during storage. The value true is converted to "true ").

5) Storage ceiling: The storage ceiling varies with different browsers, but most browsers limit the storage ceilingLess than 5 MB.

The storage ceiling for accessible http://dev-test.nemikor.com/web-storage/support-test/ test browsers.

 

1.3 Support for the minimum browser version

The minimum browser version that supports sessionStorage: IE8 and Chrome 5.

 

1.4 applicable scenarios

SessionStorage is ideal for SPA (single-page applications), which allows you to easily transmit values in various business modules.

 

2. Member 2.1 attributes

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

 

2.2 Method

String sessionStorage. key (int index): return the name of the index number of the current sessionStorage object. If no value is returned, null is returned.

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

Void sessionStorage. setItem (string key, string value): This method accepts a key name (key) and a value as the parameter and adds the key-value pair to the storage. If the key name existsUpdateThe corresponding value.

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

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

 

3. Example 3.1 storing data 3.1.1 using setItem () method

SessionStorage. setItem ('testkey', 'This is a test value'); // save a value

3.1.2 attribute-based storage

SessionStorage ['testkey'] = 'this is a test value ';

　　

3.2 reading data 3.2.1 using the getItem () method

SessionStorage. getItem ('testkey'); // => returns the value of testKey.

3.2.2 using attribute

SessionStorage ['testkey']; // => This is a test value.

 

3.3 store Json objects

SessionStorage can also store Json objects.JSON. stringify ()Converts an object to a text format.JSON. parse ()Converts text to an object.

Var userEntity = {name: 'Tom ', age: 22}; // storage value: Convert the object to the Json string sessionStorage. setItem ('user', JSON. stringify (userEntity); // value: Convert the obtained Json string back to the object var userJsonStr = sessionStorage. getItem ('user'); userEntity = JSON. parse (userJsonStr); console. log (userEntity. name); // => tom

====================================== Series of articles ==============================================

This article: 6.6 HTML5 sessionStorage session Storage

Web development path Series