JS 之 sessionStorage && localStorage

一、Storage

WebStorage主要提供了一种机制，可以让浏览器提供一种比cookie更直观的key、value存储方式：

• localStorage：本地存储，提供的是一种永久性的存储方法，在关闭掉网页重新打开时，存储的内容依然保留；
• sessionStorage：会话存储，提供的是本次会话的存储，在关闭掉会话时，存储的内容会被清除

二、localStorage和sessionStorage的区别

区别一 : 

关闭网页后重新打开，localStorage会保留，而sessionStorage会被删除

区别二 : 

在页面内实现跳转，localStorage会保留，sessionStorage也会保留

区别三 : 

在页面外实现跳转（ 打开新的网页 ），localStorage会保留，sessionStorage不会被保留

三、Storage常见的方法和属性 

属性 : 

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

方法 : 

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

四、Storage工具简单封装

// 1. 定义一个类
class Cache {
  // 2. 参数控制是创建 localStorage 还是 sessionStorage
  constructor(isLocal = true) {
    this.storage = isLocal ? localStorage : sessionStorage;
  }

  // 存储值
  setCache(key, value) {
    if (!value) {
      throw new Error('value error: value必须有值!');
    }

    if (value) {
      this.storage.setItem(key, JSON.stringify(value));
    }
  }

  // 获取值
  getCache(key) {
    const result = this.storage.getItem(key);
    if (result) {
      return JSON.parse(result);
    }
  }

  // 移除值
  removeCache(key) {
    this.storage.removeItem(key);
  }

  // 清空值
  clear() {
    this.storage.clear();
  }
}

// 3. 创建localStorage
const localCache = new Cache();

// 4. 创建sessionStorage
const sessionCache = new Cache(false);

// 5. 使用
localCache.setCache('name', 'star');