7.モジュラーパッケージングストレージは、キャッシュデータの永続性を実装します

1.モジュラーストレージパッケージ実装キャッシュデータの永続性

1.新しいモデルのjsファイルディレクトリのsrcディレクトリに新しいディレクトリモデル、名前のstorage.jsを作成します。

VaRのストレージ= { 
    SET（キー、値）{ 
        // 設定されたローカルキャッシュ方式
      localStorage.setItem（キー、JSON.stringify（値））; 
    }、
    GET（キー）{ 
        // 取得ローカルキャッシュ方法は
       返す（JSON.parseを）（キー）localStorage.getItem; 
    }、 
    （キーを削除します）{ 
        // ローカルキャッシュ方法削除
        localStorage.removeItem（キー）; 
    } 

} 

エクスポートデフォルトのストレージ。

2.参照App.vueで：

< テンプレート> 
  < div要素のid = "アプリ" > 
    <！ - 监听键盘事件- > 
    < 入力タイプ= "テキスト" Vモデル= "TODO" @keydown = "AddText（$イベント）" > 
    
    < BR > 
    < 時間> 

    < H2 >未完成</ H2 > 
    < UL > 
      < 李V-用= "リストの中（項目、インデックス）" ：キー= "インデックス" > 
        < divのV-IF = "！item.checkbox」 > 
          < 入力タイプ= "チェックボックス" Vモデル= "item.checkbox" @change = "SAVELIST（）" > {{item.title}} --- < ボタン@click = "RemoveText（インデックス）" >删除</ ボタン> 
        </ DIV > 
      </ 李> 
    </ UL > 
    < H2 >已完成</ H2 > 
    < UL > 
      < 李V-用= "リストの中（項目、インデックス）" ：キー= "インデックス" クラス= "仕上げ"> 
        < divのV-IFJS " ; 
書き出す
          
        
      
    
  
  



デフォルト{ 
  名：' アプリ' 、
  データ（）{ 
    リターン{ 
      TODO：'' 、
      リスト：[]、
    } 
  }、
  メソッド：{ 
    AddText（E）{ 
      場合（e.keyCodeの== 13 ）{
         この.list.push （{タイトル：この.todo、チェックボックス：偽}）
         この.todo = '' 
      } 
      // 设置为本地缓存
      storage.set（' リスト' 、この.LIST）。    
    }、
    RemoveText（キー）{ 
      この.list.splice（キー、1。 ）
      storage.set（' リスト' 、この.LIST）; 
    }、
    SAVELIST（）{ 
      storage.set（' リスト' 、この.LIST）; 
    } 
  }、
  搭載（）{ 
    // ライフサイクル機能、ページリフレッシュVUEトリガ
    // ローカルキャッシュ読み取り
    VARの一覧= storage.get（' リスト' ）;
     IF （リスト）{
       この.LIST = 一覧
    } 

  } 

}
</ スクリプト> 
< スタイル> 
ULのリチウム{ 
リストスタイル型：なし。
} 
.finish { 
 背景色：#eee
 } 
</ スタイル>