浏览器Storage存储

大概看了一下localStorage和sessionStorage的特性和基本操作

概述

localStorage 属性允许你访问一个Document 的 Storage；存储的数据将保存在浏览器会话中。

localStorage 类似sessionStorage，但其区别在于：存储在 localStorage 的数据可以长期保留；而当页面会话结束，当页面被关闭时，存储在 sessionStorage 的数据会被清除 。

• 页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。
• 在新标签或窗口打开一个页面时会复制顶级浏览会话的session作为新会话的session，这点和 session cookies 的运行方式不同。
• 打开多个相同的URL的Tabs页面，会创建各自的sessionStorage。
• 关闭对应浏览器窗口（Window）/ tab，会清除对应的sessionStorage。

存储在sessionStorage或localStorage中的数据特定于页面的协议

也就是说http://example.com 与 https://example.com的sessionStorage相互隔离。

被存储的键值对总是以UTF-16 DOMString 的格式所存储，其使用两个字节来表示一个字符。对于对象、整数key值会自动转换成字符串形式。

方法

const localStorage: object = window.localStorage;
const sessionStorage: object = window.sessionStorage;

// localStorage 与 sessionStorage 操作相同

// get key name by index
localStorage.key(index: number): string;

// get key value by key name
localStorage.getItem(key: string): string;

// set key-value pair
localStorage.setItem(key: string, value: string): void;

//delete key-value
localStorage.removeItem(key: string): void;

// clear
localStorage.clear(): void;


// use JSON
value = JSON.stringfy(obj: object);
obj = JSON.parse(str: string);

参考链接

Window.localStorage - Web API 接口参考 | MDN (mozilla.org)
Window.sessionStorage - Web API 接口参考 | MDN (mozilla.org)