❤️❤️❤️Question021 -JavaScript、客户端存储的几种方式，分别介绍一下

[wangbinze]

题目：客户端存储的几种方式，分别介绍一下

[wangbinze]

与特定用户相关的信息应该保存在用户的机器上。无论是登录信息、个人偏好，还是其他数据，Web应用程序提供者都需要有办法把它们保存在客户端。

cookie

• 要求服务器在相应HTTP请求时，通过发送Set-CookieHTTP头部包含会话信息。
• cookie是与特定域绑定的。设置cookie后，它会与请求一起发送到创建它的域。这个限制能保证cookie中存储的信息只对被认可的接收者开放，不被其他域访问。
• 大小限制一般为4k。

cookie的构成

• 名称：唯一标识cookie的名称。不区分大小写，但最好还是把cookie名当初区分大小写开对待，因为一些服务器软件可能需要区分。必须经过URL编码。
  • URL编码：encodeURI()和 encodeURIComponent()方法用于编码统一资源标识符（URI），以便传给浏览器。有效的 URI 不能包含某些字符，比如空格。使用 URI 编码方法来编码 URI 可以让浏览器能够理解它们，同时又以特殊的 UTF-8 编码替换掉所有无效字符。
• 值：存储在cookie里的字符串值。必须经过URL编码。
• 域：cookie有效的域。发送到这个域的所有请求都会包含对应的cookie。
• 路径：请求URL中包含这个路径才会把cookie发送到服务器。
• 过期时间：表示合适删除cookie的时间戳。默认情况下，浏览器会话结束后会删除所有cookie。不过，也可以设置删除cookie的时间。
• 安全标志：设置之后，只在使用SSL安全连接的情况下才会把cookie发送到服务器。

注意：不要再cookie中存储重要或敏感的信息。cookie数据不是保存在安全的环境中，因此任何人都可能获得。

Web Storage

Web Storage 的目的是解决通过客户端存储不需要频繁发送回服务器的数据时使用cookie的问题。

• 提供在cookie之外的存储会话数据的途径；
• 提供跨会话持久化存储大量数据的机制。

两种类型

• 大小都可达5MB。

sessionStorage对象

只存储会话数据，浏览器关闭则数据删除。不受页面刷新的影响，可以在浏览器崩溃并重启后恢复。
因为 sessionStorage 对象是 Storage 的实例，所以可以通过使用 setItem()方法或直接给属性赋值给它添加数据。

// 使用方法存储数据
sessionStorage.setItem("name", "Nicholas");
// 使用属性存储数据
sessionStorage.book = "Professional JavaScript";

通过 Web Storage 写入的任何数据都可以立即被读取。

要从 sessionStorage 中删除数据，可以使用 delete 操作符直接删除对象属性，也可以使用removeItem()方法。

delete sessionStorage.name; // 使用 delete 删除值
sessionStorage.removeItem("book");  // 使用方法删除值

sessionStorage 对象应该主要用于存储只在会话期间有效的小块数据。如果需要跨会话持久存储数据，可以使用 globalStorage 或 localStorage。

localStorage对象

在HTML5规范里，localStorage对象取代了globalStorage，作为在客户端永久存储数据的机制。要访问同一个 localStorage 对象，页面必须来自同一个域（子域不可以）、在相同的端口上使用相同的协议。

localStorage.setItem("name", "Nicholas"); // 使用方法存储数据
localStorage.book = "Professional JavaScript";  // 使用属性存储数据

let name = localStorage.getItem("name"); // 使用方法取得数据
let book = localStorage.book; // 使用属性取得数据

• *区别：**存储在 localStorage 中的数据会保留到通过 JavaScript 删除或者用户清除浏览器缓存。localStorage 数据不受页面刷新影响，也不会因关闭窗口、标签页或重新启动浏览器而丢失。

存储事件

每当 Storage 对象发生变化时，都会在文档上触发 storage 事件。使用属性或 setItem()设置值、使用 delete 或 removeItem()删除值，以及每次调用 clear()时都会触发这个事件。

IndexedDB

自行了解。