Niffler

X2.14 16340246-Cookie, SessionStorage, LocalStorage详解与用法

Posted By 16340246

基本概念

HTTP 协议是无状态的协议，它对于事务处理没有记忆能力，一旦数据交换完毕，客户端与服务器端的连接就会关闭，再次交换数据需要建立新的连接，这就意味着服务器无法从连接上跟踪会话。当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。

Cookie 是在 HTTP 协议下，服务器或脚本可以维护客户工作站上信息的一种方式。Cookie 是一些数据, 存储于你电脑上的文本文件中。

Cookie是通过客户端保持状态的解决方案。从定义上来说，Cookie就是由服务器发给客户端的特殊信息，而这些信息以文本文件的方式存放在客户端，然后客户端每次向服务器发送请求的时候都会带上这些特殊的信息。Cookie 的作用就是用于解决 HTTP 协议是无状态协议的问题：

  • 当用户访问 web 页面时，他的信息可以记录在 cookie 中。
  • 在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。

SessionStorage & LocalStorage

Web Storage 的目的是克服由 cookie 所带来的一些限制，当数据需要被严格控制在客户端时，不需要持续的将数据发回服务器。

Web Storage 两个主要目标：

  • 提供一种在 cookie 之外存储会话数据的路径。
  • 提供一种存储大量可以跨会话存在的数据的机制。

使用 Web Storage 可以存储 key/value 对的数据，比存储 Cookie 方式更直观。HTML5 的 Web Storage 提供了两种API：sessionStorage（会话存储）和 localStorage（本地存储）。

  • sessionStorage：用于临时保存同一窗口 (或标签页) 的数据，当你刷新当前窗口 (或标签页) 时，保存的数据仍然存在，但是在关闭窗口或标签页之后将会删除这些数据。
  • localStorage：与 sessionStorage 一样，但是浏览器关闭后，数据依然会一直存在

三者比较

数据生命周期

  • Cookie：如果不在浏览器中设置过期时间，cookie 被保存在内存中，生命周期随浏览器的关闭而结束，这种 cookie 简称会话 cookie。如果在浏览器中设置了 cookie 的过期时间，cookie 被保存在硬盘中，关闭浏览器后，cookie数据仍然存在，直到过期时间结束才消失。
  • sessionStorage：仅在当前会话下有效。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是 sessionStorage 在关闭了浏览器窗口后就会被销毁。
  • localStorage：数据生命周期是永久的，关闭页面或浏览器之后 localStorage 中的数据也不会消失，除非主动删除数据

储存大小：

  • Cookie：4KB 左右
  • sessionStorage & localStorage：一般为 5MB

与服务器端通信：

  • Cookie：每次都会携带在 HTTP 头中，如果使用 cookie 保存过多数据会带来性能问题
  • sessionStorage & localStorage：仅在客户端（即浏览器）中保存，不参与和服务器的通信

易用性：

  • Cookie：需要自己封装 setCookie 和 getCookie
  • sessionStorage & localStorage：可以使用 Web Storage 的原生 API，也可以再次封装来对 Object 和 Array 有更好的支持

共同点：都是保存在浏览器端，而服务端是使用 session 机制

使用

如果你想查看 Cookie, sessionStorage 或 localStorage，可以打开浏览器调试窗口，在 Application -> Storage 中就可以看见。

可以使用以下方式来获取 cookie：

document.cookie

如果你想获得某个键的 cookie，你需要写一段代码来获得，示例代码如下：

/* get cookie value by key */
getCookie (name) {
  var cookieValue = null
  if (document.cookie && document.cookie !== '') {
    var cookies = document.cookie.split(';')
    for (var i = 0; i < cookies.length; i++) {
      var cookie = cookies[i].trim()
      // Does this cookie string begin with the name we want?
      if (cookie.substring(0, name.length + 1) === (name + '=')) {
        cookieValue = decodeURIComponent(cookie.substring(name.length + 1))
      }
    }
  }
  return cookieValue
}

SessionStorage & LocalStorage

sessionStorage 和 localStorage 的用法基本一致，API 基本一样，下面只列举 sessionStorage 的用法示例

保存

比如你要储存用户的信息，你可以这样做：

// 用户信息的Object
var user = {
    username: 'user1',
    name: 'Tom',
    birth: 1990
}

// 通过键值对保存Object
sessionStorage.setItem('user', JSON.stringify(user))

在保存 Object 时，你需要使用 JSON.stringify 将它变成字符串。当然你也可以直接保存一个字符串：

// 要保存的String
var str = 'foo'

// 通过键值对保存String
sessionStorage.setItem('bar', str)

获取

通过保存时的键来获取

// 获取刚才存的user
var user = JSON.parse(sessionStorage.getItem('user'));

// 获取刚才存的bar
var bar = sessionStorage.getItem('bar')

删除

可以通过键来删除某个 item：

sessionStorage.removeItem('user')

也可以使用 clear 来将所有 sessionStorage 删除：

localStorage.clear()