Cookie, LocalStorage 与 SessionStorage

,

Cookie

Cookie 是服务器发送到用户浏览器并在本地保存的一些数据，通常来说，Cookie 被用于会话状态管理（如用户登录状态）、个性化设置与浏览器行为跟踪三个方面。单条 Cookie 的大小限制是 4KB，通常的浏览器中，每个域名的 Cookie 总个数限制为50条。

一些浏览器（比如Google Chrome）只支持对在线网站的 Cookie 进行读写操作，禁止对本地 HTML 的 Cookie 进行操作。

事实上，由于隐私问题、有限的存储空间、性能以及一些的其他原因，Cookie 正在逐渐被淘汰。取而代之的是在现代浏览器发展过程中出现的新的数据存储方式：Web Storage API 或 IndexedDB，它们允许直接将数据保存到浏览器本地。

Cookie 以键/值对的形式进行存储，当浏览器从服务器请求 Web 页面的时候，属于本页面的Cookie 会被添加到该请求中，并将用户的信息传递给服务端。

  • JavaScript 操作 Cookie

JavaScript 可以使用 document.cookie 属性来操作 Cookie。

创建 Cookie：

1
document.cookie = "userid=100000"

可以结合 Date() 对象为 Cookie 添加一个过期时间 expires，在默认的情况下，Cookie 会在浏览器关闭的时候删除：

1
document.cookie = "userid=100000;expires=Sun, 17 Apr 2077, 11:49:10 GMT"

可以使用 path 参数为 Cookie 添加一个路径，在默认的情况下，Cookie会属于当前页面：

1
document.cookie = "userid=100000;expires=

JavaScript 读取 Cookie 的方法比较简单，如下面的代码所示：

1
var x = document.cookie;

返回值是字符串类型的所有 Cookie，类型格式如下所示：

1
cookie1=value1;cookie2=value2;cookie3=value3;

修改 Cookie 与创建 Cookie 的方法相同，旧的 Cookie 会被直接覆盖。

若想删除 Cookie，则将 Cookie 的过期时间 expires 参数设置为之前的时间即可，如下所示：

1
document.cookie = "userid=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

localStorage

HTML5 的 Web Storage API 提供了两种比 Cookie 更方便存储键/值对的机制，它们分别是localStorage与 sessionStorage。接下来将会对二者分别进行介绍。

localStorage 概念

localStorage用于长久保存一个网站里的数据，保存的数据不会过期，除非你手动去删除或者清空浏览器数据。

localStorage解决了Cookie存储空间不足的问题，从4KB的大小扩展到了5MB。

此外，localStorage还有一个特点，它只支持string类型的存储，因此使用JavaScript对 localStorage进行存取操作的时候还需要注意对数据的类型进行相应的转换。

localStorage 使用方式

浏览器提供了很方便的操作localStorage的方法，语法如下：

保存数据

1
localStorage.setItem("key", "value");

读取数据

1
var key = localStorage.getItem("key");

删除特定数据

1
localStorage.removeItem("key");

删除所有数据

1
localStorage.clear();

sessionStorage

sessionStorage 概念

sessionStorage是 Web Storage API 提供的第二种数据存储机制，经常用于临时保存某一窗口或标签页的数据。它与localStorage的唯一区别是localStorage属于永久性的存储，而sessionStorage会在会话结束的时候清空相应的键/值对。

sessionStorage 使用方式

浏览器也提供了很方便的操作 sessionStorage 的方法，与 localStorage 的操作方法类似，语法如下：

保存数据

1
sessionStorage.setItem("key", "value");

读取数据

1
var key = sessionStorage.getItem("key");

删除特定数据

1
sessionStorage.removeItem("key");

删除所有数据

1
sessionStorage.clear();

localStorage 与 sessionStorage 的区别与联系

区别

  • 生命周期不同：localStorage 存储的数据始终有效，一般用于数据持久化存储；sessionStorage在关闭页面或者浏览器后自动消失。
  • 作用域不同：localStorage 在所有同源窗口中共享；sessionStorage不在不同浏览器窗口间共享，即使是同一个页面。

联系

  • sessionStorage 与 localStorage 仅在本地保存，不会自动将数据发送给服务器，有效节省网络流量。
  • sessionStorage 与 localStorage 的存储大小一般皆为 5 MB。
  • sessionStorage 与 localStorage 都保存在浏览器端，且遵循同源策略。
  • sessionStorage 与 localStorage 的存储对象皆为字符串类型的键/值对。