In-depth understanding of the sessionStorage object in HTML5

The content of this article is to have an in-depth understanding of the sessionStorage object of HTML5. It has a certain reference value. Now I share it with you. Friends in need can refer to it

HTML5 sessionStorage session Storage

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

Table of contents

1. Introduction

　1.1 Description

　1.2 Features

　1.3 Minimum browser version support

1.4 Suitable scenarios

2. Members

　2.1 Properties

　2.2 Methods

3. Examples

　3.1 Storage data

　3.2 Reading data

　3.3 Storing Json objects

1. Introduction

1.1 Description

sessionStorage is new in HTML5 A session storage object used to temporarily save the data of the same window (or tab). The data will be deleted after closing the window or tab.

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

1.2 Features

1) Same-origin policy restrictions. If you want to operate 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 limit. The sessionStorage operation is limited to a single tab page, and sessionStorage data can be shared by accessing same-origin page in this tab page.

3) Only store locally. The data in 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 tab recovery function, the data in seesionStorage will also be recovered).

4) Storage method. The storage method of sessionStorage adopts key and value methods. The value of value must be of string type (passing in a non-string will also be converted to a string when stored. 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.

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

1.3 Minimum browser version support

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

1.4 Suitable scenarios

sessionStorage is very suitable for SPA (single page application), and can easily transfer values ​​​​in each business module.

2. Member

2.1 Attribute

readonly int sessionStorage.length: Returns an integer, indicating storage exist The number of data items (key-value pairs) in the sessionStorage object.

2.2 Method

string sessionStorage.key(int index): Returns the key name of the index number of the current sessionStorage object. If not, return null.

string sessionStorage.getItem(string key): Returns the value corresponding to the key name. If not, return null.

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

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

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

3. Example

3.1 Store data

3.1.1 Use the setItem() method to store

sessionStorage.setItem('testKey','这是一个测试的value值'); // 存入一个值

3.1.2 Store through attributes

sessionStorage['testKey'] = '这是一个测试的value值';

3.2 Read data

3.2.1 Get the value through the getItem() method

sessionStorage.getItem('testKey'); // => 返回testKey对应的值

3.2.2 Get the value through the attribute

sessionStorage['testKey']; // => 这是一个测试的value值

3.3 Store Json object

sessionStorage can also store Json objects: when storing, the object is converted into text format through JSON.stringify(); when reading, the text is converted back into the object through JSON.parse().

var userEntity = {
    name: 'tom',
    age: 22
};
 
// 存储值：将对象转换为Json字符串
sessionStorage.setItem('user', JSON.stringify(userEntity));
 
// 取值时：把获取到的Json字符串转换回对象
var userJsonStr = sessionStorage.getItem('user');
userEntity = JSON.parse(userJsonStr);
console.log(userEntity.name); // => tom

Related recommendations:

sessionStorage stores json objects

Use sessionStorage to save and obtain json objects

sessionStorage local storage data instance

The above is the detailed content of In-depth understanding of the sessionStorage object in HTML5. For more information, please follow other related articles on the PHP Chinese website!