关于前端:你需要知道的浏览器端存储

8次阅读

共计 3091 个字符，预计需要花费 8 分钟才能阅读完成。

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

存储容量大：Web Storage 依据浏览器的不同，存储容量能够达到 5-10M 之间。
仅位于浏览器端，不与服务端产生通信。

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

生命周期：Local Storage 是长久化的本地存储，存储在其中的数据是永远不会过期的，使其隐没的惟一方法是手动删除；而 Session Storage 是临时性的本地存储，它是会话级别的存储，当会话完结（页面被敞开）时，存储内容也随之被开释。
作用域：Local Storage、Session Storage 和 Cookie 都遵循同源策略。但 Session Storage 特地的一点在于，即使是雷同域名下的两个页面，只有它们不在同一个浏览器窗口中关上，那么它们的 Session Storage 内容便无奈共享。

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

用它来存储一些内容稳固的资源。比方图片内容丰盛的电商网站会用它来存储 Base64 格局的图片字符串。
还会用它存储一些不常常更新的 CSS、JS 等动态资源。
长久，数据存储空间大。

存储数据：setItem()

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

读取数据：getItem()

localStorage.getItem('user_name')

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

localStorage.removeItem('user_name')

清空数据记录：clear()

localStorage.clear()

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

适宜用来存储同步的会话级别的信息。
这些信息只实用于以后会话，当你开启新的会话时，须要相应的更新或开释。
能够用来存储你本次会话的浏览脚印。
时效性，敞开浏览器销毁会话信息。
页面会话在浏览器关上期间始终放弃，并且从新加载或复原页面仍会放弃原来的页面会话。
在新标签或窗口关上一个页面时会复制顶级浏览会话的上下文作为新会话的上下文。
关上多个雷同的 URL 的 Tabs 页面，会创立各自的 sessionStorage。
敞开对应浏览器 tab，会革除对应的 sessionStorage。

存储数据：setItem()

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

读取数据：getItem()

sessionStorage.getItem('user_name')

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

sessionStorage.removeItem('user_name')

清空数据记录：clear()

sessionStorage.clear()

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

IndexDB 是没有存储下限的（一般来说不会小于 250M）。
它不仅能够存储字符串，还能够存储二进制数据。

关上 / 创立一个 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());
    }
};

正文完