Web storage

11.18'22

介绍

网页中存储数据有多种方式。如直接存储, localStoragesessionStoragecookiesindexedDB 等。那么这些存储方式有什么区别呢?

参考:Using the Web Storage API

共性和区别

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

JavaScript 脚本直接存储

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

localStorage

没有过期时间

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

sessionStorage

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

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

HTTP cookies

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 = "username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";

indexedDB

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

📖