客户端存储

cookie

使用cookie的注意事项

还有一种叫作 HTTP-only 的 cookie。HTTP-only 可以在浏览器设置，也可以在服务器设置，但只能 在服务器上读取，这是因为 JavaScript 无法取得这种 cookie 的值。 因为所有 cookie 都会作为请求头部由浏览器发送给服务器，所以在 cookie 中保存大量信息可能会影 响特定域浏览器请求的性能。保存的 cookie 越大，请求完成的时间就越长。即使浏览器对 cookie 大小有 限制，最好还是尽可能只通过 cookie 保存必要信息，以避免性能问题。 对 cookie 的限制及其特性决定了 cookie 并不是存储大量数据的理想方式。因此，其他客户端存储技 术出现了。

注意 不要在cookie中存储重要或敏感的信息。cookie数据不是保存在安全的环境中，因 此任何人都可能获得。应该避免把信用卡号或个人地址等信息保存在 cookie 中。

Web Storage

要访问同一个 localStorage、sessionStorage 对象，页面必须来自同一个域(子域不可以)、在相同的端 口上使用相同的协议

Storage类型

Storage 类型用于保存名/值对数据，直至存储空间上限(由浏览器决定)。Storage 的实例与其他 对象一样，但增加了以下方法。

• clear():删除所有值;不在 Firefox 中实现。

• getItem(name):取得给定 name 的值。

• key(index):取得给定数值位置的名称。

• removeItem(name):删除给定 name 的名/值对。

• setItem(name, value):设置给定 name 的值。 getItem()、removeItem()和 setItem()方法可以直接或间接通过 Storage 对象调用。因为每 个数据项都作为属性存储在该对象上，所以可以使用点或方括号操作符访问这些属性，通过同样的操作 来设置值，也可以使用 delete 操作符删除属性。即便如此，通常还是建议使用方法而非属性来执行这 些操作，以免意外重写某个已存在的对象成员。

存储事件

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

• domain:存储变化对应的域。

• key:被设置或删除的键。

• newValue:键被设置的新值，若键被删除则为 null。

• oldValue:键变化之前的值。 可以使用如下代码监听 storage 事件:

    window.addEventListener("storage",
        (event) => alert('Storage changed for ${event.domain}'));

对于 sessionStorage 和 localStorage 上的任何更改都会触发 storage 事件，但 storage 事 件不会区分这两者。