Vue客戶端存儲

客戶端存儲

關於客戶端存儲：通過把數據存儲在瀏覽器中，用戶不必每次都向服務器請求獲取同一個信息。離線時，使用本地存儲的數據而不是向遠端服務器上請求數據就顯得非常有用。

Local Storage 適合存儲你希望進行持久化的較小數據集，比如用戶偏好設置或表單數據。

注意：存儲對象和數組這樣更復雜的數據，必須使用 JSON 來對數據進行序列化和反序列化。

太多廢話了直接正題

我是一個小案例：

<template>
   <div class="tab">
   <h2>便籤</h2> 
    <p>
      <input v-model="newValue" placeholder="請輸入...">
      <button @click="addTab">AddTab</button>
   </p>
   <ul>
      <li v-for="(value, key) in items">
         <span>{{ value }}</span> 
         <button @click="removeTab(key)">RemoveTab</button>
      </li>
   </ul>
  
   </div>
</template>
<script>
export default {
   data(){
      return {
         items:[],
         newValue:null
      }
   },
   mounted(){
      if(localStorage.getItem("items")){
        try{
           this.items = JSON.parse(localStorage.getItem("items"));
        } catch(e){
           localStorage.removeItem('items');
        }
      }
   },
   methods:{
      addTab(){
         if(!this.newValue){
            return
         }
         this.items.push(this.newValue);
         this.newValue = '';
         this.saveTab();
      },
      removeTab(n){
         this.items.splice(n, 1);
         this.saveTab();
      },
      saveTab(){
        const parsed = JSON.stringify(this.items);
        localStorage.setItem('items', parsed)
      }
   }
}
</script>

效果如下：

是不是感覺跟普通的標籤保存實例差不多

但是刷新瀏覽器，發現數據已存儲在瀏覽器中，而開發者工具來檢查客戶端存儲的情況。

相關筆記：

1. mounted方法是用來加載持久化的數據（存在的話）。 可以通過邏輯判斷來決定是否對數據進行存儲。
2. JSON.parse(text)用於將JSON字符串轉換爲對象，而JSON.stringify(value)用於將js值轉換爲JSON字符串，要轉換的 JavaScript 值（通常爲對象或數組）。
3. localStorage.getItem(key):獲取指定key本地存儲的值。
4. localStorage.setItem(key,value)：將value存儲到key字段
5. localStorage.removeItem(key):刪除指定key本地存儲的值