前端本地存储策略 -- cookie, sessionStorage 和 localStorage

Posted on | In |

前端本地存储策略

通过本地存储（Local Storage），web 应用程序能够在用户浏览器中对数据进行本地的存储。
在 HTML5 之前，应用程序数据只能存储在 cookie 中，包括每个服务器请求。本地存储则更安全，并且可在不影响网站性能的前提下将大量数据存储于本地。
与 cookie 不同，存储限制要大得多（至少5MB），并且信息不会被传输到服务器。
本地存储经由起源地（origin）（经由域和协议）。所有页面，从起源地，能够存储和访问相同的数据。

从以下几点做一些对比：

  • 存储量
  • 存储类型
  • 使用方式
  • 数据的生命期
  • 与服务器端通信
  • 优点
  • 缺点

存储量

  • cookie: 4KB
  • sessionStorage: 一般为5MB
  • localStorage: 一般为5MB

存储类型

  • cookie: 字符串
  • sessionStorage: 键值对
  • localStorage: 键值对

使用方式

  • cookie: 获取 cookie 可以直接使用 document.cookie ，但是获取到的 cookie 是一个字符串，它包含了 cookie 中存储的所有数据，形式如 "key1=value1; key2=value2"
  • sessionStorage: 普通对象非常相似，可以直接通过中括号 sessionStorage[‘key’] 的方式添加和获取数据，也可以通过点语法 sessionStorage.key 的方式进行操作，sessionStorage 也有自己的 api 用于操作数据。或者sessionStorage.setItem('key', 'value')；var data = sessionStorage.getItem('key')
  • localStorage: 同上

数据的生命期

  • cookie: 一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效
  • sessionStorage: 仅在当前会话下有效，关闭页面或浏览器后被清除
  • localStorage: 除非被清除，否则永久保存

与服务器端通信

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

优点

  • cookie: 有大量的库可供我们更方便快捷得操作 cookie ，如 jQuery.cookie.js
  • sessionStorage:
    • 存储的数据不会被自动随着请求被发送到服务端
    • 可存储的数据大小相比 cookie 来说大了很多，但是每个浏览器都不同，所以没有一个统一的值。
  • localStorage:
    • 数据存储量大；
    • 不会被发送到服务端；
    • 持久化本地存储，除非手动删除，否则一直存在；
    • 在同一个域下，所有窗口共享其中存储的数据 (sessionStorage则不可)

缺点

  • cookie: 如 "key1=value1; key2=value2" 这样的字符串无法通过 JSON.parse() 转换为 json 格式的数据，需要通过正则表达式的方式将所需要的值匹配出来
  • sessionStorage:
    • sessionStorage 中只能够保存字符串类型的数据，所以在保存非字符串类型的数据时，一定要先将其转换成字符串，比如图片可以转换成 base64 字符串后保存，对象可使用 JSON.stringify() 转为字符串后存储，甚至可以存储一段 js 脚本
    • 其中所存储的数据的生命周期与 session 类似，即只存在于一个会话周期内，当浏览器关闭或标签页关闭时，数据即会被删除（前进和后退并不会影响到数据，因为还在当前的会话中），这就导致了即便是同一个网站，但在不同的标签页和窗口内，也无法共享其中存储的数据
  • localStorage:
    • 只能够保存字符串类型的数据，所以在保存非字符串类型的数据时，一定要先将其转换成字符串，比如图片可以转换成 base64 字符串后保存，对象可使用 JSON.stringify() 转为字符串后存储，甚至可以存储一段 js 脚本

seesionStorage例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/**
 * 向 sessionStorage 中添加一条数据
 * @param key {string} 键
 * @param value {string} 值
 */
sessionStorage.setItem( key, value ) 
/**
 * 在 sessionStorage 中读取一条数据
 * @param key {string} 键
 * @return {string|null} 存在返回值，不存在返回 null，需要注意的是如  果使用点语法和中括号，不存在时返回 undefined
 */
sessionStorage.getItem( key ) 
 * 在 sessionStorage 中移除一条数据
 * @param key {string} 键
 */
sessionStorage.removeItem( key ) 
 * 在 sessionStorage 中移除所有
 */
sessionStorage.clear()