JavaScript cookies、sessionStorage、localStorage三种存储方式的区别与使用，包含基本使用方法。

cookie、sessionStorage与localStorage的区别与使用

1 三者区别

• HTML5中的Web Storage包括了两种存储方式，都可以用来存储数据。
• 数据以键值对的形式存储。
• 数据类型限制为string类型，存取时需要使用JSON.parse()、JSON.stringify()进行数据类型转化。

1.1 cookie

• cookie内存储一条数据最大不能超过4KB ，最多不能存储超过20条，若未设置过期时间，则在浏览器关闭后数据将被自动清除。

• 介绍

  • cookie机制采用的是在客户端保持 HTTP 状态信息的方案。
  • 当浏览器访问Web服务器的某个资源时，Web服务器会在HTTP响应头中添加一个键值对传送给浏览器，再由浏览器将该cookie放到客户端磁盘的一个文件中，该文件可理解为cookie域(键值对的集合)，往后每次访问某个网站时，都会在请求头中带着这个网站的所有cookie值。

• 基本原理

  • 当一个浏览器访问某web服务器时，web服务器会调用HttpServletResponse的addCookie()方法，在响应头中添加一个名叫Set-Cookie的响应字段用于将Cookie返回给浏览器，当浏览器第二次访问该web服务器时会自动的将该cookie回传给服务器，来实现用户状态跟踪。

• 特性

  1. 自动发送
  2. 域名独立
  3. 过期时限
  4. 4kB限制

• 基本应用

  • 自动登录、跟踪用户上次访问站点的时间、显示最近浏览信息等。

1.2 sessionStorage

• sessionStorage是会话存储。一条数据大小不能超过5M，数量无限制，关掉页面数据自动被清除。
  • 存储的数据只有在同一个会话中（同源策略）的页面才能访问
  • 数据不会跟随HTTP请求一起发送到服务器，只会在本地生效
• 特点
  • 同源策略限制
  • 单标签页限制
  • 只能本地存储
  • 存储方式
  • 存储上限限制

1.3 localStorage

• localStorage本地存储。一条数据大小不超过5M，数量无限制，除非主动删除，否则数据不会被销毁。
  • 用于持久化的本地存储

2 使用方法

2.1 cookie的使用

2.2 sessionStorage的使用

• sessionStorage属于当会话存储。会话结束的时候，sessionStorage中的键值对就会被清空。
• sessionStorage与localStorage常用的使用方法基本上一样。

• 常用方法

  方法名	作用
  setItem	存储数据
  getItem	读取数据
  key	读取第i个数据的名字或称为键值(从0开始计数)
  removeItem	删除指定键名的键值对变量
  clear	清空localStorage上存储的所有数据

2.3.1 存储数据

• setItem('key',value)

if (!window.sessionStorage) {
    console.log('浏览器版本太低')
} else {
    let storage = window.sessionStorage
    storage.setItem('a', 100); // 存储键名为a，键值为100的变量
    storage.b = 200;           // 存储键名为b，键值为200的变量
    storage['c'] = 300;        // 存储键名为c，键值为300的变量
}

2.3.2 读取数据

• .getItem('key')

storage.getItem('a') // 读取保存在storage对象里键名为a的变量值
storage.b            // 读取b的变量值
storage['c']         // 读取c的变量值
storage.key(0)       // 根据key值读取数据,key(0)代表对象内的第一条数据
storage.valueOf()    // 读取保存在storage对象上的全部数据

2.3.3 修改数据

if (!window.sessionStorage) {
  console.log('浏览器版本太低')
} else {
    //初始化a为100
    storage.a = 100
    // 修改a
    storage.a = 'Silly'
    storage.a			//修改后的a值为Silly
}

2.3.4 删除数据

• .clear()
• .removeItem()

if (!window.sessionStorage) {
    console.log('浏览器版本太低')
} else {
    storage.clear()         	// 删除所有键值对
    storage.removeItem('a') 	// 删除指定键名的键值对
}

2.3 localStorage的使用

• 主流浏览器限制localStorage的值的类型为string类型。

• 若存储内容多，则会过多占用内存空间，导致页面变卡。

• 浏览器隐私模式下面是不可读取的。

• 不会被爬虫抓到。

• 常用方法

  方法名	作用
  setItem	存储数据
  getItem	读取数据
  key	读取第i个数据的名字或称为键值(从0开始计数)
  removeItem	删除指定键名的键值对变量
  clear	清空localStorage上存储的所有数据

2.3.1 存储数据

• setItem('key',value)

if (!window.localStorage) {
    console.log('浏览器不支持localStorage')
} else {
    let storage = window.localStorage
    storage.setItem('a', 100);
    storage.b = 200;           
    storage['c'] = 300;       
}

2.3.2 读取数据

• .getItem('key')

storage.getItem('a') 
storage.b            
storage['c']         
storage.key(0)       
storage.valueOf()    

2.3.3 修改数据

if (!window.localStorage) {
  console.log('浏览器不支持localStorage')
} else {
    //初始化a为100
    storage.a = 100
    // 修改a
    storage.a = 'Silly'
    storage.a			
}

2.3.4 删除数据

• .clear()
• .removeItem()

if (!window.localStorage) {
    console.log('浏览器不支持localStorage')
} else {
    storage.clear()         	
    storage.removeItem('a') 	
}