HTML5 sessionStorage session storage

       Original link: https://www.cnblogs.com/polk6/p/5512979.html

 

         sessionStorage is a new session storage object in HTML5, which is used to temporarily save the data of the same window (or tab), which will be deleted after closing the window or tab. This article mainly introduces the use of sessionStorage (session storage). Including operations such as adding, modifying, and deleting.

content

1. Introduction

　　1.1 Description

　　1.2 Features

　　1.3 Browser minimum version support

　　1.4 Suitable scene

2. Member

　　2.1 Properties

　　2.2 Methods

3. Example

　　3.1 Store data

　　3.2 Read data

　　3.3 Storing Json Objects

 

1 Introduction 

1.1 Description

sessionStorage is a new session storage object in HTML5, which is used to temporarily save the data of the same window (or tab), which will be deleted after the window or tab is closed.

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

 

1.2 Features

1) Same-origin policy restrictions. To operate on the same sessionStorage between different pages, those pages must be under the same protocol, same hostname and 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 tab page limit. SessionStorage operations are limited to a single tab, and sessionStorage data can be shared by accessing pages from the same origin in this tab.

3) Store locally only. The data of sessionStorage will not be sent to the server along with the HTTP request, it will only take effect locally, and the data will be cleared after closing the tab. (If you use Chrome's restore tab function, the data of sessionStorage will also be restored).

4) Storage method. The storage method of sessionStorage adopts the method of key and value. The value of value must be of type string (passing in a non-string will also be converted to a string when storing. A true value will be converted to "true").

5) Storage upper limit: Different browsers have different storage upper limits, but most browsers limit the upper limit to less than 5MB .

You can visit  http://dev-test.nemikor.com/web-storage/support-test/ to  test your browser's storage limit.

 

1.3 Browser minimum version support

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

 

1.4 Suitable scene 

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

 

2. Members

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 Methods

 string sessionStorage.key(int index) : Returns the key name of the index number of the current sessionStorage object. Returns null if none.

 string sessionStorage.getItem(string key) : Returns the value (value) corresponding to the key name (key). Returns null if none.

 void sessionStorage.setItem(string key, string value) : This method accepts a key name (key) and value (value) as parameters, and adds the key-value pair to the storage; if the key name exists, it updates its corresponding value.

 void sessionStorage.removeItem(string key) : Remove the specified key name (key) from the sessionStorage object.

 void sessionStorage.clear() : Clears all items of the sessionStorage object.

 

3. Example

3.1 Store data

3.1.1 Using the setItem() method to store

sessionStorage.setItem('testKey','this is a test value'); // store a value

3.1.2 Storing by Attribute　　

sessionStorage['testKey'] = 'This is a test value';

　　

3.2 Read data

3.2.1 Get the value through the getItem() method

sessionStorage.getItem('testKey'); // => returns the value corresponding to testKey

3.2.2 Get value by attribute

sessionStorage['testKey']; // => this is a test value

 

3.3 Storing Json Objects

sessionStorage can also store Json objects: when storing, convert the object to text format via JSON.stringify() ; when reading, convert the text back to an object via JSON.parse() .

var userEntity = {
    name: 'tom',
    age: 22
};

// store value: convert object to Json string
sessionStorage.setItem('user', JSON.stringify(userEntity));

// When getting the value: convert the obtained Json string back to an object
var userJsonStr = sessionStorage.getItem('user');
userEntity = JSON.parse(userJsonStr);
console.log(userEntity.name); // => tom