HTML5 Sessionstorage Session Storage

Sessionstorage is a new session store object for HTML5 that temporarily saves data for the same window (or tab), which will be deleted after closing the Window or tab page. This article mainly introduces how to use Sessionstorage (Session store). Includes additions, modifications, deletions, and so on.

Directory

1. Introduction

1.1 Description

1.2 Features

1.3 Browser Minimum version support

1.4 Fit Scene

2. Members

2.1 Properties

2.2 Methods

3. Example

3.1 Storing data

3.2 reading data

3.3 Storing JSON objects

1. Introduction 1.1 Description

Sessionstorage is a new session store object for HTML5 that temporarily saves data for the same window (or tab), which will be deleted after closing the Window or tab page.

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

1.2 Features

1) Same-origin policy restrictions. To operate on the same sessionstorage between different pages, these pages must be under the same protocol, the same domain name, and the same port.

2) Single label page limit. Sessionstorage operations are restricted to a single tab page, where same-origin page access can share sessionstorage data.

3) stored locally only. Seesionstorage data is not sent to the server with the HTTP request, it only takes effect locally, and the data is purged after the tab is closed. (If you use Chrome's Recovery tab feature, the Seesionstorage data will also be restored).

4) storage mode. Seesionstorage is stored in the form of key, value. Value must be a string type (passing in a non-string and also converted to a string when stored). The true value is converted to "true").

5) Storage cap limit: Different browser storage limit is not the same, but most browsers limit the limit to 5MB below .

Access to the storage limit of the http://dev-test.nemikor.com/web-storage/support-test/test browser.

1.3 Browser Minimum version support

Browser minimum version supported Sessionstorage: IE8, Chrome 5.

1.4 Fit Scene

The Sessionstorage is ideal for spa (single page applications) and can be used to transfer values across business modules.

2. Member 2.1 Properties

readonly int sessionstorage. length : Returns an integer that represents the number of data items (key-value pairs) stored in the Sessionstorage object.

2.2 Methods

String Sessionstorage. Key (int index): Returns the key name of the index ordinal of the current Sessionstorage object. If NULL is not returned.

String Sessionstorage. GetItem (String key): Returns the value that corresponds to the key name (key). If NULL is not returned.

void Sessionstorage. SetItem (string key, String value): The method takes a key name (key) and a value as a parameter, adds a key-value pair to the store, and updates its corresponding value if the key name exists.

void Sessionstorage. RemoveItem (String key): Removes the specified key name (key) from the Sessionstorage object.

void Sessionstorage. Clear (): Clears all items of the Sessionstorage object.

3. Example 3.1 Storage Data 3.1.1 is stored using the SetItem () method

Sessionstorage.setitem (' TestKey ', ' This is a test value '); Deposit a value

3.1.2 Storage by attribute mode

sessionstorage[' testKey ' = ' This is a test of value ';

　　

3.2 reading data 3.2.1 using GetItem () method to take value

Sessionstorage.getitem (' TestKey '); = = Returns the value corresponding to the TestKey

3.2.2 Value by attribute method

sessionstorage[' TestKey ']; = = This is the value of a test

3.3 Storing JSON objects

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

var userentity = {    name: ' Tom ',    age:22};//store Value: Converts the object to a JSON string Sessionstorage.setitem (' user ', json.stringify ( userentity));//value: Converts the retrieved JSON string back to the object var userjsonstr = Sessionstorage.getitem (' user '); userentity = Json.parse ( USERJSONSTR); Console.log (Userentity.name); Tom

================================== Series article ==========================================

This article: 6.6 HTML5 sessionstorage Session Storage

Web Development Road Series articles

HTML5 Sessionstorage Session Storage