浅谈浏览器的存储知识

Tim同学
141 阅读5分钟

浏览器的存储和浏览器的缓存不是同一个东西，本文先谈谈浏览器的存储知识

既然谈论的是浏览器的存储，那么我们先来看下浏览器提供了哪些存储？按F12键，可以打开开发者工具，在Application面板中，侧边的Storage里可以看到：localStorage、sessionStorage、IndexedDB、Cookies等。

image.png

cookie

官网解释：

HTTP Cookie（也叫 Web Cookie 或浏览器 Cookie）是服务器发送到用户浏览器并保存在本地的一小块数据。浏览器会存储 cookie 并在下次向同一服务器再发起请求时携带并发送到服务器上。通常，它用于告知服务端两个请求是否来自同一浏览器——如保持用户的登录状态。Cookie 使基于无状态的 HTTP 协议记录稳定的状态信息成为了可能。

cookie 主要用于以下三个方面：

  • 会话状态管理：如用户登录状态、购物车、游戏分数或其它需要记录的信息。
  • 个性化设置：如用户自定义设置、主题等。
  • 浏览器行为跟踪：如跟踪分析用户行为等。

如果你想了解，如何操作cookie、cookie优缺点以及应用实例，可以参考这篇文章 闲庭信步聊前端 - Cookie的前世今生。

目前网上现有许多关于google决定弃用cookie的新闻报道，cookie可能会被逐步淘汰。 image.png

Web Storage

Web Storage API 提供了存储机制，通过该机制，浏览器可以安全地存储键值对，比使用 cookie 更加直观。 这篇文章 一步一步讲解如何使用这项简单的技术。

Web Storage 包含如下两种机制：

  • sessionStorage 为每一个给定的源（given origin）维持一个独立的存储区域，该存储区域在页面会话期间可用（即只要浏览器处于打开状态，包括页面重新加载和恢复）。
  • localStorage 同样的功能，但是在浏览器关闭，然后重新打开后数据仍然存在。

cookie、sessionStorage、localStorage 的区别

区别点cookiesessionStoragelocalStorage
数据的生命周期默认为关闭浏览器后失效，可设置失效时间仅关闭标签页或浏览器之前有效始终有效，除非主动清理
存储大小限制4k5M5M
与服务器通信每次都会携带在http头中仅在浏览器中保存，不参与服务器通信仅在浏览器中保存，不参与服务器通信
API易用性需要自己封装，原生API不友好可采用原生接口，或自行封装可采用原生接口，或自行封装
应用场景判断用户是否登录过网站，保存用户上次登录的时间，上次查看的页面，浏览计数适合敏感账号一次性登录，token放在sessionStorage里常用于长期登录，适合长期保存在本地的数据

从安全方面来说，cookie可能被窃取，所以应该尽可能少的使用cookie，一般用来存放不敏感的信息。

另外cookie还需要指定作用域，不可以跨域调用，限制很多。

敏感的信息用session存储，比如用户的登陆信息，session可以存放于文件，数据库，内存中都可以。

sessionStorage

sessionStorage 属性允许你访问一个，对应当前源的 session Storage 对象。它与 localStorage 相似，不同之处在于 localStorage 里面存储的数据没有过期时间设置，而存储在 sessionStorage 里面的数据在页面会话结束时会被清除。

  • 页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。
  • 在新标签或窗口打开一个页面时会复制顶级浏览会话的上下文作为新会话的上下文，这点和 session cookie 的运行方式不同。
  • 打开多个相同的 URL 的 Tabs 页面，会创建各自的 sessionStorage。
  • 关闭对应浏览器标签或窗口，会清除对应的 sessionStorage。
// 保存数据到 sessionStorage
sessionStorage.setItem("key", "value");

// 从 sessionStorage 获取数据
let data = sessionStorage.getItem("key");

// 从 sessionStorage 删除保存的数据
sessionStorage.removeItem("key");

// 从 sessionStorage 删除所有保存的数据
sessionStorage.clear();

localStorage

只读的 localStorage 属性允许你访问一个Document 源（origin）的对象 Storage；存储的数据将保存在浏览器会话中。localStorage 类似 sessionStorage，但其区别在于：存储在 localStorage 的数据可以长期保留；而当页面会话结束——也就是说，当页面被关闭时，存储在 sessionStorage 的数据会被清除。

// 保存数据
localStorage.setItem("myCat", "Tom");

// 获取数据
let cat = localStorage.getItem("myCat");

// 移除数据
localStorage.removeItem("myCat");

// 移除所有数据
localStorage.clear();

IndexedDB

IndexedDB 是一种在用户浏览器内持久化存储数据的方法。它可以让你创建具有丰富查询能力的 Web 应用，而无需考虑网络可用性，因此你的应用在在线和离线时都可以正常运行。

IndexedDB API 是强大的，但对于简单的情况可能看起来太复杂。如果你更喜欢一个简单的 API，请尝试 localForage、dexie.js、PouchDB、idb、idb-keyval、JsStore 或者 lovefield 之类的库，这些库使 IndexedDB 对开发者来说更加友好。

你可以在 MDN IndexedDB 主要引导页 了解完整的 API 参考和使用指南，浏览器支持细节，以及关键概念的一些解释的链接，本文不再赘述。

参考文献

avatar
文章
阅读
粉丝