本地存储Storage与Cookie

本地存储Storage与Cookie

1、Storage

• WebStorage主要提供了一种机制，可以让浏览器提供一种比cookie更直观的key、value存储方式：
  • localStorage：本地存储，提供的是一种永久性的存储方法，在关闭掉网页重新打开时，存储的内容依然保留；
  • sessionStorage：会话存储，提供的是本次会话的存储，在关闭掉会话时，存储的内容会被清除；

localStorage和sessionStorage两者之间的区别

• 关闭网页后重新打开，localStorage会保留，而sessionStorage会被删除；
• 在页面内实现跳转，localStorage会保留，sessionStorage也会保留；
• 在页面外实现跳转（打开新的网页），localStorage会保留，sessionStorage不会被保留；

页面外跳转比如使用a链接的target属性在新窗口打开

2、Storage常见的方法和属性

localStorage和sessionStorage两者之间的属性和方法都是一样的

一般开发过程中localStorage使用较多

常用属性：

• Storage.length：只读属性，返回一个整数，表示存储在Storage对象中的数据项数量；

常用方法：

• Storage.key()：该方法接受一个数值n作为参数，返回存储中的第n个key名称；
• Storage.getItem()：该方法接受一个key作为参数，并且返回key对应的value；
• Storage.setItem()：该方法接受一个key和value，并且将会把key和value添加到存储中。
• Storage.removeItem()：该方法接受一个key作为参数，并把该key从存储中删除；
• Storage.clear()：该方法的作用是清空存储中的所有key；

3、Storage常见封装

// 使用ES6封装一个本地存储的构造函数方案
// 通过new生成Cache的时候传入参数选择localStorageOrsessionStorage，默认localStorage
// 提供setItem方法，内部转化为JSON格式
// 提供getItem方法，内部实现将JSON字符串转化为JS对象
// 提供其他常用方法并导出
class Cache {
  constructor(isLocal = true) {
    this.storage = isLocal ? localStorage : sessionStorage;
  }
  setItem(key, value) {
    if (value) {
      this.storage.setItem(key, JSON.stringify(value));
    }
  }
  getItem(key) {
    let value = this.storage.getItem(key);
    if (value) {
      value = JSON.parse(value);
      return value;
    }
  }
  removeItem(key) {
    this.storage.removeItem(key);
  }
  clear() {
    this.storage.clear();
  }
  key(index) {
    return this.storage.key(index);
  }
  length() {
    return this.storage.length;
  }
}

const localCache = new Cache();
const sessionCache = new Cache(false);

export { localCache, sessionCache };

4、IndexedDB

IndexedDB是保存在本地浏览器中，用于在客户端存储大量的结构化数据。

5、cookie

• 网站为了辨别用户身份而存储在用户本地终端（Client Side）上的数据。
  • 浏览器会在特定的情况下携带上cookie来发送请求，我们可以通过cookie来获取一些信息；
• Cookie总是保存在客户端中，按在客户端中的存储位置，Cookie可以分为内存Cookie和硬盘Cookie。
  • 内存Cookie由浏览器维护，保存在内存中，浏览器关闭时Cookie就会消失，其存在时间是短暂的；
  • 硬盘Cookie保存在硬盘中，有一个过期时间，用户手动清理或者过期时间到时，才会被清理；

通过是否设置过期时间来辨别内存cookie或是硬盘cookie

• 没有设置过期时间，默认情况下cookie是内存cookie，在关闭浏览器时会自动删除；
• 有设置过期时间，并且过期时间不为0或者负数的cookie，是硬盘cookie，需要手动或者到期时，才会删除；

cookie的常见属性

• cookie的生命周期：
  • 默认情况下的cookie是内存cookie，也称之为会话cookie，也就是在浏览器关闭时会自动被删除；
  • 通过设置expires或者max-age来设置过期的时间；
• cookie的作用域：（允许cookie发送给哪些URL）
• Domain：指定哪些主机可以接受cookie
• Path：指定主机下哪些路径可以接受cookie

cookie的缺点

• 每次http请求都会携带cookie，造成流量的浪费
• 在headers中采用明文传输
• 大小限制为4kb
• 使用cookie验证登录存在缺陷，部分平台不能很好的携带cookie

cookie替代方案：token