客户端存储
cookie
cookie在每次客户端向服务器发送请求时都会被带上,在浏览器关闭时就会被删除
限制
不超过4k
cookie的组成
cookie在浏览器中是由以下参数构成: (这些参数在Set-Cookie头部中使用分号加空格隔开)
-
名称 : 唯一标识cookie的名称。
cookie名不区分大小写,因此myCookie和MyCookie是同一个名称。不过,实践中最好将cookie名当成区分大小写来对待,因为一些服务器软件可能这样对待它们。cookie名必须经过URL编码。 -
值 : 存储在cookie里的字符串值。这个值必须经过URL编码。
-
域(domain)
-
路径
-
过期时间 :表示何时删除cookie的时间戳
-
安全标志(secure) : 设置之后,只在使用SSL安全连接的情况下才会把cookie发送到服务器。
注意 不要在cookie中存储重要或敏感的信息。cookie数据不是保存在安全的环境中,因此任何人都可能获得。应该避免把信用卡号或个人地址等信息保存在cookie中。
Web Storage
限制 每个源5MB
目的 :是解决通过客户端存储不需要频繁发送回服务器的数据时使用cookie的问题。
方法
- clear():删除所有值;不在Firefox中实现。
- getItem(name):取得给定name的值。
- key(index):取得给定数值位置的名称。
- removeItem(name):删除给定name的名/值对。
- setItem(name, value):设置给定name的值。
示例
for (let i = 0, len = sessionStorage.length; i < len; i++){
let key = sessionStorage.key(i);
let value = sessionStorage.getItem(key);
alert(`${key}=`${value}`);
}
类型
localStorage 永久存储机制
要访问同一个localStorage对象,页面必须来自同一个域(子域不可以)、在相同的端口上使用相同的协议
sessionStorage 跨会话的存储机制 ----数据只会存储到浏览器关闭。
// 使用方法存储数据
sessionStorage.setItem("name", "Nicholas");
// 使用属性存储数据
sessionStorage.book = "Professional JavaScript";
......
cookie、localStorage、sessionStorage异同对比
IndexedDB — 浏览器中存储结构化数据的一个方案
IndexedDB的设计几乎完全是异步的。为此,大多数操作以请求的形式执行,这些请求会异步执行,产生成功的结果或错误。绝大多数IndexedDB操作要求添加onerror和onsuccess事件处理程序来确定输出。
[详情参考] (https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API)
使用方式
- 打开数据库。
- 在数据库中创建一个对象仓库(object store)。
- 启动一个事务,并发送一个请求来执行一些数据库操作,像增加或提取数据等。
- 通过监听正确类型的 DOM 事件以等待操作完成。
- 在操作结果上进行一些操作(可以在 request 对象中找到)