理解與使用JS的 localStorage與sessionStorage

在前端開發中，儘量少用cookie，原因：

1.cookie限制大小，約4k左右，不適合存儲業務數據，尤其是數據量較大的值
2.cookie會每次隨http請求一起發送，浪費寬帶

在移動開發中儘量用localstroage，優點：

1.存儲數據量大，localStorage拓展了cookie的4K限制
2.會隨http請求一起發送，localStorage會可以將第一次請求的數據直接存儲到本地，這個相當於一個5M大小的針對於前端頁面的數據庫，相比於cookie可以節約帶寬，但是這個卻是只有在高版本的瀏覽器中才支持的

缺點：

1.在瀏覽器的隱私模式下不能讀取
2.本質是在讀寫文件，寫入數據量大的話會卡（FF是將localstorage寫入內存中的）
3.不能被爬蟲讀取
4.localStorage是公共資源，如果你的產品域名下有很多應用共享這份資源會有風險

localStorage與sessionStroage區別:

1.localStroage是將信息存儲在硬件設備中的，關閉瀏覽器或網頁也不會消失；
2.sessionStroage的有效期只是網頁在瀏覽器打開到關閉的時間段

安全性的考慮：

需要注意的是，不是什麼數據都適合放在 Cookie、localStorage 和 sessionStorage 中的。使用它們的時候，需要時刻注意是否有代碼存在 XSS 注入的風險。因爲只要打開控制檯，你就隨意修改它們的值，也就是說如果你的網站中有 XSS 的風險，它們就能對你的 localStorage 肆意妄爲。所以千萬不要用它們存儲你係統中的敏感數據。

一、localstorage三種設置方法（增）

// 方法1
window.localStorage.name1 = 'code1';
// 方法2
window.localStorage["name2"] = "code2";
// 方法3
window.localStorage.setItem("name3", "code3");

瀏覽器查看

二、localStorage的讀取方法（查）

// 方法1
window.localStorage.name1; // code1
// 方法2
window.localStorage["name2"]; // code2
// 方法3
window.localStorage.getItem("name3"); // code3

瀏覽器查看

三、localStorage的刪除（刪）

// 將localStorage的所有內容清除
window.localStorage.clear();;

// 將localStorage中的某個鍵值對刪除

storage.removeItem("name");

三、localStorage的注意事項

一般我們會將JSON存入localStorage中，但是在localStorage會自動將localStorage轉換成爲字符串形式，這個時候我們可以使用JSON.stringify()這個方法，來將JSON轉換成爲JSON字符串

{
  if (!window.localStorage) {
    alert("瀏覽器支持localstorage");
  } else {
    var storage = window.localStorage;
    var data = {
      name: 'code.net.cn',
      sex: 'man',
      hobby: 'program'
    };
    var d = JSON.stringify(data);
    storage.setItem("data", d);
    console.log(storage.data);
  }
}

讀取之後要將JSON字符串轉換成爲JSON對象，使用JSON.parse()方法

{
  var storage = window.localStorage;
  var data = {
    name: 'code.net.cn',
    sex: 'man',
    hobby: 'program'
  };
  var d = JSON.stringify(data);
  storage.setItem("data", d);
  //將JSON字符串轉換成爲JSON對象輸出
  var json = storage.getItem("data");
  var jsonObj = JSON.parse(json);
  console.log(typeof jsonObj);
}

四、sessionStorage 儲存方式

let name = "code.net.cn"

// 方法1
window.sessionStorage.setItem('name3', name);
//方法2
window.sessionStorage['name3'] = name;

五、sessionStorage 讀取方式

// 方法1
window.sessionStorage.getItem('name');
// 方法2
window.sessionStorage["name"]

六、sessionStorage存儲Json對象

{
    let userEntity = {
      name: 'code.net.cn',
      skill: 'web'
    };

    // 存儲值：將對象轉換爲Json字符串
    sessionStorage.setItem('user', JSON.stringify(userEntity));

    // 取值時：把獲取到的Json字符串轉換回對象
    let userJsonStr = sessionStorage.getItem('user');
    userEntity = JSON.parse(userJsonStr);
    console.log(userEntity.name); // => 'code.net.cn'
  }

七、vue-ls

Vue plugin for work with local storage, session storage and memory storage from Vue context
Vue插件用於從Vue上下文中處理本地存儲、會話存儲和內存存儲。

vue-ls官網

// npm 安裝
npm install vue-ls --save

// yarn 安裝
yarn add vue-ls

import Storage from 'vue-ls';

options = {
  namespace: 'vuejs__', // key prefix
  name: 'ls', // name variable Vue.[ls] or this.[$ls],
  storage: 'local', // storage name session, local, memory
};

Vue.use(Storage, options);

//or
//Vue.use(Storage);

new Vue({
  el: '#app',
  mounted: function () {
    Vue.ls.set('foo', 'boo');
    //Set expire for item
    Vue.ls.set('foo', 'boo', 60 * 60 * 1000); //expiry 1 hour
    Vue.ls.get('foo');
    Vue.ls.get('boo', 10); //if not set boo returned default 10

    let callback = (val, oldVal, uri) => {
      console.log('localStorage change', val);
    }

    Vue.ls.on('foo', callback) //watch change foo key and triggered callback
    Vue.ls.off('foo', callback) //unwatch

    Vue.ls.remove('foo');
  }
});