sessionStorage 和 localStorage(又称为DOM Storage) 是HTML5 WebStorage API 提供的,可以方便的在web请求之间保存数据。有了本地数据,就可以避免数据在浏览器和服务器间不必要地来回传递。
共同点:都是保存在浏览器端,且同源的。区别:cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。
cookies
- 域+path+name 标识
- name+value, 有服务器产生,发回client,保存在client (http 的set-cookies 字段)
- 每次http请求都会发送 Cookies中 “域+path”相同的所有cookie
- 大多数浏览器Cookie最大问为4K
- 浏览器可能还限制了用户计算机存储的cookie数量(如允许每个站点最多存储20个cookies,超过则删除旧的;有些浏览器还对所有站点的cookie总数作出限制,如300)
Local Storage
- 域相关
- 永久保存在本地(client)
- 容量无限制
- 数据不会过期,除非由于security 原因活着用户请求删除
Session Storage
- 跟Local Storage类似,但Session Storage 只与当前会话相关,浏览器关闭则删除。 其特别之处有:
- top browser context,及在同一个页面内的所有frame/iframe 共享同一个session storage; 不同的page 有不同的session storage
- 会话结束即删除
IndexedDB
相对于Local Storage (DOM Storage)来说,IndexedDB 用于客户端的大量的结构化数据存储,Local Storage 属于小数据量存储。 特性包括:
- 一个域一个database
- key-value 方式
- 建立在关系数据模型之上,索引表、游标、事务等概念
- 满足一些offline web applications 需求
这里要强调的是 IndexedDB属于大数据量存储,而Local Storage属于小数据量存储。其在WebKit中的实现表现为: Local Storage 初始化时全部数据被读入内存,其后的操作都针对内存操作,但存在后台同步线程将数据写入sqlite3数据库;因此 Local Storage API是同步操作。但对IndexedDB而言,数据量大,显然不能全部读入内存,采用标注的数据库读写方式,在 window中使用的是异步操作方式;只有在worker环境下是同步。