浏览器本地存储cookie、localStorage 与 sessionStorage

首先来了解下HTTP协议

• http：超文本传输协议，无状态，同一个客户端的这次请求和上次请求没有对应关系。
• https：超文本传输安全协议，HTTP + SSL / TLS，也就是在 HTTP 上又加了一层处理加密信息的模块。服务端和客户端的信息传输都会通过 TLS 进行加密，所以传输的数据都是加密后的数据。

对http服务器来说，它并不知道这两个请求来自同一个客户端，为了解决这个问题，Web程序引入了cookie机制来维护状态。

1.cookie

1.1 cookie是什么

cookie是浏览器提供的一种机制，可以由JavaScript对其进行操作(设置、读取、删除)，是一种会话跟踪技术，是存储于访问者计算机中的一小块数据
会话：用户进入网站，开始浏览信息到关闭浏览器的过程，就称之为是一次会话；
会话跟踪技术：浏览器和服务器之间在进行多次请求间共享数据的过程，就称为会话跟踪技术；

1.2 cookie的特性

• cookie可以实现跨页面全局变量
• cookie可以跨越同域名下的多个网页，但不能跨域使用
• cookie会随着HTTP请求发送给服务器
• cookie会存储于访问者的计算机中
• 同一个网站中所有页面共享一套cookie
• 可以设置有效期限
• 存储空间为4KB左右

1.3 cookie应用场景

• 会话状态管理（如用户登录状态、购物车等）
• 个性化设置（保存用户设置的样式等）
• 浏览器行为跟踪（如跟踪分析用户行为等）

1.4 操作cookie

每个cookie都是一个键/值对格式的字符串(key=value)

设置cookie：

document.cookie="name1=qxj";
document.cookie="name2=xm";

如果要改变一个cookie的值，只能重新赋值

设置有效期（expires）：

var d=new Date();
d.setDate(d.getDate()+3); //按天数设置
document.cookie="user3=xd; expires="+d;

读取cookie：

var cookies = document.cookie;

只能够一次获取所有的cookie值，使用时必须自己解析这个字符串，来获取指定的cookie值

删除cookie：cookie过期会自动消失
要手动删除一个cookie，可将其有效期设为一个过去的时间

var d=new Date();
d.setDate(d.getDate()-1);
document.cookie="user1=xh; expires="+d;

2.HTML5本地存储（WebStorage）

H5本地存储有 localStorage 与 sessionStorage 两种
优点：

• 更大的存储空间，有5MB左右
• 不会随HTTP请求发送给服务器
• 有方便的API操作
• 移动端普及高

2.1 localStorage详解

localStorage 为永久性保存数据，不会随着浏览器的关闭而消失。
按域名进行存储，可以在同域名下跨页面访问，不会和其他域名冲突。
按键值对存储：key/value

在Angular项目中往往需要建一个 LocalStorageService 来进行本地存储，以此为例，讲解localStorage的用法：

// localstorage.service.ts
import {Injectable} from '@angular/core'

@Injectable()
export class LocalStorage {

  public static localStorage: any = window.localStorage

  constructor() {
    if (!LocalStorage.localStorage) {
      throw new Error('您的浏览器不支持本地存储（LocalStorage）！')
    }
  }

	// localStorage只支持string类型的存储
  public static set(key: string, value: any): void {
   	// 如果key已经存在，则覆盖key对应的value
    // 如果不存在则添加key与value
    LocalStorage.localStorage.setItem(key, JSON.stringify(value))
  }

  public static get(key: string): string {
	// localStorage.getItem(key) 获取key对应的value，如果key不存在则返回null
    let value = LocalStorage.localStorage.getItem(key)
    try {
      value = JSON.parse(value)
    } catch (e) {
    }
    return value
  }

  public static remove(key: string): any {
  	// 删除某个键值对
    LocalStorage.localStorage.removeItem(key)
  }

  public static clear(): any {
  	// 将同域名下的所有数据都清空
    LocalStorage.localStorage.clear()
  }

}

2.2 sessionStorage详解

sessionStorage 各种操作与 localStorage 一样

2.3 localStorage与sessionStorage区别

我们经常用到这两种存储方式，因此需要清楚了解它们之间的相同点和区别。

相同点：

1. localStorage与sessionStorage的API调用方法相同；
2. 不同浏览器无法共享localStorage或sessionStorage中的信息；

不同点：

1. 访问权限：
   相同浏览器的不同页面可以共享相同的localStorage（前提是页面属于相同域名和端口）；
   相同浏览器的不同页面无法共享sessionStorage的信息，只局限在当前的标签页；

2. 数据的生命周期：
   localStorage 为永久性保存数据，不会随着浏览器的关闭而消失。按域名进行存储，可以在同域名下跨页面访问，不会和其他域名冲突；
   sessionStorage 为临时性保存数据，当页面关闭就会消失；

3.cookie、localStorage 与 sessionStorage的比较

特性	cookie	localStorage	sessionStorage
由谁初始化	客户端或服务器，服务器可以使用Set-Cookie请求头。	客户端	客户端
数据的生命周期	一般由服务器生成，可设置失效时间，如果在浏览器生成，默认是关闭浏览器之后失效	永久保存，可清除	仅在当前会话有效，关闭页面后清除
存放数据大小	4KB	5MB	5MB
与服务器通信	每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题	仅在客户端保存	仅在客户端保存
用途	一般由服务器生成，用于标识用户身份	用于浏览器缓存数据	用于浏览器缓存数据
访问权限	任意窗口	任意窗口	当前页面窗口