超越Cookie：当今的客户端数据存储技术

local storage 的另一个用例是在多个选项卡之间同步数据。通过为 'storage' 事件添加侦听器，你可以在另一个选项卡或窗口中更新数据。

window.addEventListener('storage', () => {  
  console.log('local storage has been updated');  
}); 

仅当在另一个文档中修改本地或会话存储时才会触发此事件。也就是说，你无法在当前浏览器选项卡中侦听 storage 的更改。不幸的是，截至撰写本文时，存储事件监听器尚未在 Chrome 上得到支持。

那么localStorage 和 sessionStorage 之间有什么区别呢？与 cookie 不同，Web Storage API 没有过期或最大期限功能。如果使用 localStorage，除非手动删除，否则数据将无限期保留。你可以通过运行 localStorage.removeItem('key') 来删除单个键的值，或者通过运行 localStorage.clear() 清除所有数据。

如果使用 sessionStorage，则数据将仅持续到当前会话结束。如果你没有设置最大时间或过期，它将被视为与 cookie 保持的方式相似。在任何一种情况下，如果用户使用隐身，本地存储都不会在会话之间保留数据。

IndexedDB

如果 cookie 和 localStorage 都不符合你的要求，还有另一种选择：IndexedDB，一个浏览器内置的数据库系统。

当 localStorage 同步执行所有方法时，IndexedDB 会异步调用它们。这将会允许访问数据而不会阻塞其余代码。当你处理大量可能访问代价高昂的代码时，这非常有用。

IndexedDB 在其存储的数据类型方面也具有更大的灵活性。虽然 cookies 和 localStorage 仅限于存储字符串，但 IndexedDB 可以存储可以通过“结构化克隆算法”复制的任何类型的数据。这包括 Object、 Date、 File、 Blob、 RegEx 以及更多类型。

性能和灵活性增加的缺点是 IndexedDB 的 API 更低级且更复杂。幸运的是有许多库可以解决这个问题。

localForage 为 IndexedDB 提供了一个更简单的类似 localStorage 的 API。 PouchDB 提供了一个可以离线的存储 API，可以与在线 CouchDB 数据库同步。 idb 是一个小型库，具有更简单的基于 promise 的 API。 Dexie 添加了更强大的查询 API，同时保持了良好的性能。根据你的使用情况还有许多选择。

Cache API

另一种用于持久数据的专用工具是 Cache API。虽然它最初是为 service workers 创建的，但它可用于缓存任何网络请求。 Cache API 公开了 Window.caches，它提供了保存和检索响应的方法，允许你保存可永远以后访问的 Requests 和 Responses 对。

例如，如果你想在从 API 请求响应之前检查浏览器的缓存以获取响应，则可以执行以下操作：

const apiRequest = new Request('https://www.example.com/items');  
caches.open('exampleCache') // opens the cache  
  .then(cache => {  
    cache.match(apiRequest) // checks if the request is cached  
      .then(cachedResponse =>   
        cachedResponse || // return cachedReponse if available  
        fetch(apiRequest) // otherwise, make new request  
          .then(response => {  
            cache.put(apiRequest, response); // cache the response  
            return response;  
          })  
        })  
    .then(res => console.log(res))  
}) 

第一次运行代码时，它将缓存响应。随后每次都会缓存请求，并且不会发出网络请求。

总结

在浏览器上存储数据的每种方法都有其自己的用途。如果信息很小，很敏感，并且可能在服务器上使用，那么 cookie 就是最佳选择。如果要保存更大且更不敏感的数据，Web Storage API 可能是更好的选择。

如果你打算存储大量结构化数据，IndexedDB 非常棒。 Cache API 用于存储来自 HTTP 请求的响应。根据你的需要，有很多工具可供使用。

【编辑推荐】

1. 超详细的数据库主机及数据库日志收集总结
2. 值得推荐的四款优秀图形数据库
3. 后端程序员必备：MySQL数据库相关流程图/原理图
4. 8月数据库排行：Oracle 节节攀升，PG 和 MongoDB 分数再现下跌
5. 面试官：在使用MySQL数据库时，遇到重复数据怎么处理？

（编辑：晋中站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!