Detailed session storage

Detailed session storage

I. Introduction

sessionStorage is a temporary session storage object newly added by HTML5, which is used to temporarily save the data of the same window (or tab page), and the stored content will be automatically deleted when the current window or browser is closed.

2. Features

1. Data timeliness : The page session is kept while the browser is open, and reloading or restoring the page will still maintain the original page session, and will not be cleared until the corresponding browser tab or window is closed;
2. Page sharing : When a page is opened in a new tab or window, the context of the top-level browsing session will be copied as the context of the new session ( key points, explained below );
3. Independence : open multiple Tabs pages with the same URL, each will be created sessionStorage;
4. Storage method : adopt the method of key and value. The value of value must be a string type;
5. Storage limit : different browsers have different limits, and the limit of mainstream browsers is 5MB;

Note: The minimum supported browser version: IE8, Chrome 5

3. Properties and methods

// 获取sessionStorage长度（只读属性）
sessionStorage.length;  
// 通过key存储值
sessionStorage[key] = value;  
// 存储值
sessionStorage.setItem(key, value);
// 直接通过key查找值
sessionStorage[key];
// 查找值
sessionStorage.getItem(key);
// 删除值
sessionStorage.removeItem(key);
// 清空
sessionStorage.clear();
// 获取指定key值，查询不到返回null
sessionStorage.key(index);
// 可通过此方法获取所有储存key值
Object.keys(sessionStorage);  

4. Scene introduction

sessionStorage is mainly suitable for popular single-page applications, which can facilitate the transfer of values ​​in each module.

4.1 Page sharing

In the characteristics of sessionStorage , page sharing is difficult to understand. Let's explain it in detail below:

First, let's take a look at the description of this feature. When a new tab or window opens a page, the context of the top-level browsing session will be copied as the context of the new session . Translated into an example, there is a current page A, and the page A jumps to the B page (B page and A page 必须满足同源策略); at this time, the sessionStorage information of the A page will be copied and passed to the B page ( deep copy ). Pages have the same sessionStorage information but do not interfere with each other.

Summary: In some specific scenarios, the newly opened page will copy the sessionStorage of the previous page! But not sessionStorage of each window can share data! ! !

4.2 Reference type data storage

Through the above introduction, we understand that sessionStorage only accepts storage of string type data, but according to business requirements, most of the data types that need to be passed when we pass through the page are arrays or objects;

At this point, you need to use JSON.stringify(value) to convert the data into a string type, and convert it back through JSON.parse(value) when using it;

Note: If the property of the object to be converted is undefined, the function will be filtered out, and undefined is encountered in the array or converted to null.