Web storage

介绍

网页中存储数据有多种方式。如直接存储， localStorage，sessionStorage，cookies，indexedDB 等。那么这些存储方式有什么区别呢？

参考：Using the Web Storage API

共性和区别

都属于特定的页面（域），但 cookies 可以在同一主域下的多个子域共享。

JavaScript 脚本直接存储

普通 JavaScript 对象，生命周期与当前网页一致。

localStorage

没有过期时间

localStorage.setItem('key', 'value');
localStorage.getItem('key');

sessionStorage

页面会话。只要浏览器打开，页面重载或恢复后都还存在；浏览器关闭则会清除。

在新的 tab 或 window 中打开页面，会初始化新的sessionStorage。

HTTP cookies

过期时间，默认浏览器决定，可能持续几周。可以通过设置 max-age expires 修改。

HTTP cookie 是服务器发送给浏览器的一小块数据（set-cookie）。浏览器对该服务器发送请求时会带回该 cookie，来保持业务状态，让服务器记住发送请求的客户端（cookie）。

过去，cookie 被浏览器用来存储客户端数据，因为这是以前唯一可选的方式。现在则建议优先使用上述 storage API。

// Read
allCookies = document.cookie;

// Write
document.cookie = "name=oeschger; Secure";

优点

在主域下的多个子域可以共享数据。

缺点

最大 4K。每次请求都会带上。

限制

• HTTP only (Secure) cookies 无法通过 JavaScript 读取。

• Cross-domain cookies 无法读取。

  axios 中的withCredentials只能保证请求带上cookie，并获取响应的set-cookie。

参考

• Document.cookie - Web APIs | MDN，
• JavaScript Cookies

document.cookie = "username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";

indexedDB

以 NoSQL 数据库形式，按对象存储。适合大容量数据存储和离线使用。