乐趣区

【芝士整理】浏览器存储

Cookie
维护浏览器和服务器端会话状态的一种方式,一般用于保存用户身份信息。
服务器端生成 Cookie 推送到浏览器端,浏览器负责保存和维护数据。
特点
域名下的所用请求都会带上 Cookie
每条 Cookie 限制在 4KB 左右
Cookie 在过期时间之前一直有效,若未设置过期时间,关闭浏览器窗口即失效
服务端通过响应头中的 set-cookie 向浏览器写入 cookie,浏览器端可以通过 document.cookie 读写 cookie(若一条 Cookie 在响应头中设置了 HttpOnly 标识,浏览器将无法获取和操作该条 Cookie)
WebStorage
WebStorage —— 浏览器本地存储方案,包括 SessionStorage 和 LocalStorage
两者的差异在存储周期上,使用方法上无差异
SessionStorage
限制在页面内的单次本地存储
特点
仅在当前页面有效
关闭页面或者浏览器窗口后失效
LocalStorage
限制在同源内的持久本地存储
特点
遵循同源策略
除非手动清除,否则一直保存在本地
共同特性
存储大小
一般存储空间为 5MB 左右,桌面端 Chrome40+,FireFox34+,IE9+ 默认调整至 10MB(本地测试结果与此相矛盾),部分浏览器可由用户手动调整上限。
StackOverflow – 关于计算 LocalStorage 上限
错误处理
同步读写,通过 try…catch 捕获错误信息。如下捕获超限错误
try {
localStorage.setItem(data.name, JSON.stringify(data));
} catch(domException) {
if (domException.name === ‘QuotaExceededError’ ||
domException.name === ‘NS_ERROR_DOM_QUOTA_REACHED’) {
// Fallback code comes here.
}
}
存储格式
数据以字符串格式存储,对象写入时需使用 JSON.stringify 转换为字符串,再使用 JSON.parse 转换为对象。
IndexedDB
大量数据的结构化存储
特点
遵循同源策略
除非手动清除,否则一直保存在本地
存储空间大,一般为 250MB
主键对应值存储,比如以 ID 为主键存储对应数据
支持各类存储格式,甚至是二进制数据 (Blob)
异步存储,禁止在页面 reload 时做批量存储
Web SQL
非官方规范,目前已弃用
Application Cache
应用缓存(又称 AppCache)可让开发人员指定浏览器应缓存哪些文件以供离线用户访问。即使用户在离线状态下按了刷新按钮,您的应用也会正常加载和运行。
利用应用缓存,保证离线情况下正常使用,减少网络请求,加快访问速度
大部分浏览器对缓存数据容量的限制时 5MB
应用缓存初级使用指南
简易说明

localForage – 封装 IndexedDB, WebSQL, localStorage,提供统一 API

退出移动版