本地存储特性

  • 数据存储在用户浏览器中
  • 设置、读取方便、甚至页面刷新不丢失数据
  • 容量较大，sessionStorage约5M、localStorage约20M

  • 只能存储字符串，可以将对象JSON.stringify()编码后存储，然后使用的使用JSON.parse()转换回对象

    window.sessionStorage

    1、生命周期为关闭浏览器窗口
    2、在同一个窗口(页面)下数据可以共享
    3、以键值对的形式存储使用
    存储数据：

    1. sessionStorage.setItem(key, value)

    获取数据：

    1. sessionStorage.getItem(key)

    删除数据：

    1. sessionStorage.removeItem(key)

    清空数据：(所有都清除掉)

    1. sessionStorage.clear()

    window.localStorage

    1、声明周期永久生效，除非手动删除 否则关闭页面也会存在
    2、可以多窗口（页面）共享（同一浏览器可以共享）
    3. 以键值对的形式存储使用
    存储数据：

    1. localStorage.setItem(key, value)

    获取数据：

    1. localStorage.getItem(key)

    删除数据：

    1. localStorage.removeItem(key)

    清空数据：(所有都清除掉)

    1. localStorage.clear()

    工具函数的封装

    ```javascript class StorageFn { constructor () {

    1.   this.ls = window.localStorage;
    2.   this.ss = window.sessionStorage;

    }

    /————————-cookie——————————-/ /设置cookie/ setCookie (name, value, day) {

    1.   var setting = arguments[0];
    2.   if (Object.prototype.toString.call(setting).slice(8, -1) === 'Object'){
    3.       for (var i in setting) {
    4.           var oDate = new Date();
    5.           oDate.setDate(oDate.getDate() + day);
    6.           document.cookie = i + '=' + setting[i] + ';expires=' + oDate;
    7.       }
    8.   }else{
    9.       var oDate = new Date();
    10.       oDate.setDate(oDate.getDate() + day);
    11.       document.cookie = name + '=' + value + ';expires=' + oDate;
    12.   }

    }

    /获取cookie/ getCookie (name) {

    1.   var arr = document.cookie.split('; ');
    2.   for (var i = 0; i < arr.length; i++) {
    3.       var arr2 = arr[i].split('=');
    4.       if (arr2[0] == name) {
    5.           return arr2[1];
    6.       }
    7.   }
    8.   return '';

    }

    /删除cookie/ removeCookie (name) {

    1.   this.setCookie(name, 1, -1);

    }

  1. /*-----------------localStorage---------------------*/
  2. /*设置localStorage*/
  3. setLocal(key, val) {
  4.     var setting = arguments[0];
  5.     if (Object.prototype.toString.call(setting).slice(8, -1) === 'Object'){
  6.         for(var i in setting){
  7.             this.ls.setItem(i, JSON.stringify(setting[i]))
  8.         }
  9.     }else{
  10.         this.ls.setItem(key, JSON.stringify(val))
  11.     }
  13. }
  15. /*获取localStorage*/
  16. getLocal(key) {
  17.     if (key) return JSON.parse(this.ls.getItem(key))
  18.     return null;
  20. }
  22. /*移除localStorage*/
  23. removeLocal(key) {
  24.     this.ls.removeItem(key)
  25. }
  27. /*移除所有localStorage*/
  28. clearLocal() {
  29.     this.ls.clear()
  30. }
  33. /*-----------------sessionStorage---------------------*/
  34. /*设置sessionStorage*/
  35. setSession(key, val) {
  36.     var setting = arguments[0];
  37.     if (Object.prototype.toString.call(setting).slice(8, -1) === 'Object'){
  38.         for(var i in setting){
  39.             this.ss.setItem(i, JSON.stringify(setting[i]))
  40.         }
  41.     }else{
  42.         this.ss.setItem(key, JSON.stringify(val))
  43.     }
  45. }
  47. /*获取sessionStorage*/
  48. getSession(key) {
  49.     if (key) return JSON.parse(this.ss.getItem(key))
  50.     return null;
  52. }
  54. /*移除sessionStorage*/
  55. removeSession(key) {
  56.     this.ss.removeItem(key)
  57. }
  59. /*移除所有sessionStorage*/
  60. clearSession() {
  61.     this.ss.clear()
  62. }

} ```