你需要知道的浏览器端存储

是什么

Web Storage 是 HTML5 专门为浏览器存储而提供的数据存储机制。它又分为 Local Storage 与 Session Storage、IndexDB

为什么

1. 存储容量大： Web Storage 根据浏览器的不同，存储容量可以达到 5-10M 之间。
2. 仅位于浏览器端，不与服务端发生通信。

Local Storage 与 Session Storage 的区别

两者的区别在于生命周期与作用域的不同。

1. 生命周期：Local Storage 是持久化的本地存储，存储在其中的数据是永远不会过期的，使其消失的唯一办法是手动删除；而 Session Storage 是临时性的本地存储，它是会话级别的存储，当会话结束（页面被关闭）时，存储内容也随之被释放。
2. 作用域：Local Storage、Session Storage 和 Cookie 都遵循同源策略。但 Session Storage 特别的一点在于，即便是相同域名下的两个页面，只要它们不在同一个浏览器窗口中打开，那么它们的 Session Storage 内容便无法共享。

Local Storage

它也是文本内容，以键值对的形式存在。

1. 用它来存储一些内容稳定的资源。比如图片内容丰富的电商网站会用它来存储 Base64 格式的图片字符串。
2. 还会用它存储一些不经常更新的 CSS、JS 等静态资源。
3. 持久，数据存储空间大。

• 存储数据：setItem()

localStorage.setItem('user_name', 'wxh')

• 读取数据： getItem()

localStorage.getItem('user_name')

• 删除某一键名对应的数据： removeItem()

localStorage.removeItem('user_name')

• 清空数据记录：clear()

localStorage.clear()

Session Storage

它也是文本内容，以键值对的形式存在。

1. 适合用来存储同步的会话级别的信息。
2. 这些信息只适用于当前会话，当你开启新的会话时，需要相应的更新或释放。
3. 可以用来存储你本次会话的浏览足迹。
4. 时效性，关闭浏览器销毁会话信息。
5. 页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。
6. 在新标签或窗口打开一个页面时会复制顶级浏览会话的上下文作为新会话的上下文。
7. 打开多个相同的URL的Tabs页面，会创建各自的sessionStorage。
8. 关闭对应浏览器tab，会清除对应的sessionStorage。

• 存储数据：setItem()

sessionStorage.setItem('user_name', 'wxh')

• 读取数据： getItem()

sessionStorage.getItem('user_name')

• 删除某一键名对应的数据： removeItem()

sessionStorage.removeItem('user_name')

• 清空数据记录：clear()

sessionStorage.clear()

IndexDB

IndexDB 是一个运行在浏览器上的非关系型数据库。

1. IndexDB 是没有存储上限的（一般来说不会小于 250M）。
2. 它不仅可以存储字符串，还可以存储二进制数据。

• 打开/创建一个 IndexDB 数据库

  // 后面的回调中，我们可以通过event.target.result拿到数据库实例
  let db
  // 参数1位数据库名，参数2为版本号
  const request = window.indexedDB.open("wxhDB", 1)
  // 使用IndexDB失败时的监听函数
  request.onerror = function(event) {
     console.log('无法使用IndexDB')
   }
  // 成功
  request.onsuccess  = function(event){
    // 此处就可以获取到db实例
    db = event.target.result
    console.log("你打开了IndexDB")
  }

• 创建一个 object store（object store 对应到数据库中的“表”单位）。

// onupgradeneeded事件会在初始化数据库/版本发生更新时被调用，我们在它的监听函数中创建object store
request.onupgradeneeded = function(event){
  let objectStore
  // 如果同名表未被创建过，则新建test表
  if (!db.objectStoreNames.contains('test')) {
    objectStore = db.createObjectStore('test', { keyPath: 'id' })
  }
}  

• 构建一个事务来执行一些数据库操作，像增加或提取数据等。

  // 创建事务，指定表格名称和读写权限
  const transaction = db.transaction(["test"],"readwrite")
  // 拿到Object Store对象
  const objectStore = transaction.objectStore("test")
  // 向表格写入数据
  objectStore.add({id: 1, name: 'wxh'})

• 通过监听正确类型的事件以等待操作完成。

// 操作成功时的监听函数
transaction.oncomplete = function(event) {
  console.log("操作成功")
}
// 操作失败时的监听函数
transaction.onerror = function(event) {
  console.log("这里有一个Error")
}

工具函数

var storage = {
    /**
     对本地数据进行操作的相关方法，如localStorage,sessionStorage的封装
    */
    setStorage: function(key, value, duration) {
        var data = {
            value: value,
            expiryTime: !duration || isNaN(duration) ? 0 : this.getCurrentTimeStamp() + parseInt(duration)
        };
        localStorage[key] = JSON.stringify(data);
    },
    getStorage: function(key) {
        var data = localStorage[key];
        if (!data || data === "null") {
            return null;
        }
        var now = this.getCurrentTimeStamp();
        var obj;
        try {
            obj = JSON.parse(data);
        } catch (e) {
            return null;
        }
        if (obj.expiryTime === 0 || obj.expiryTime > now) {
            return obj.value;
        }
        return null;
    },
    removeStorage: function(key){
        localStorage.removeItem(key);
    },
    getSession: function(key) {
        var data = sessionStorage[key];
        if (!data || data === "null") {
            return null;
        }
        return JSON.parse(data).value;

    },
    setSession: function(key, value) {
        var data = {
            value: value
        }
        sessionStorage[key] = JSON.stringify(data);
    },
    getCurrentTimeStamp: function() {
        return Date.parse(new Date());
    }
};