實例詳解vue中使用localstorage來儲存頁面信息

本文主要介紹了vue中使用localstorage來儲存頁面資訊,小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。

環境建構：

參考：vue API

#超簡單的Vue.js環境建構教學

詳情：

npm install --global vue-cli

 vue init webpack vue-project

然後：

#cd vue-project

npm install    如果你配置了淘寶鏡像，也可以用cnpm install

npm run dev

##我們就在瀏覽器看到：

 

但我們最終要實現：

 

#如何達到如圖的效果？

1.將App.vue修改為：

<template>
 <p id="app">
  <p class=&#39;vue-demo&#39;>
   <input type="text" class="txt" v-model=&#39;newItem&#39; @keyup.enter=&#39;addItemFun&#39;>
   <ul>
    <li v-for="its in items">{{its.name}}</li>
   </ul>
  </p>
 </p>
</template>
<script>
import store from &#39;./store&#39;
export default {
 name: &#39;app&#39;,
 data() {
  return {
   newItem: &#39;&#39;,
   items: store.fetch()
  }
 },
 watch: {
  items: {
   handler: function(val, oldVal) {
    store.save(val);
   },
   deep: true
  }
 },
 methods: {
  addItemFun() {
   var _this = this;
   _this.items.push({ &#39;name&#39;: _this.newItem });
   _this.newItem = &#39;&#39;;
  }
 }
}

</script>
<style>
#app {
 font-family: &#39;Avenir&#39;, Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}

.vue-demo {
 width: 400px;
 margin: 0 30px;
}

.txt {
 width: 200px;
 height: 25px;
 line-height: 24px;
 border-radius: 5px;
}

</style>

對於初學vue的同學，可能對於watch可能不太熟悉，那就麻煩大家移步到vue API 或參考下小穎之前寫的文章：vue——實例方法/ 資料

2.在與App.vue同級目錄下，新建store.js檔：

const STORAGE_KEY = 'todos-vuejs'

export default {

 fetch: function() {

  return window.JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]')

 },

 save: function(items) {

  window.localStorage.setItem(STORAGE_KEY, window.JSON.stringify(items))

 }

}

3.在專案中開啟cmd窗口，運行：npm run dev,就完成啦嘻嘻。

相關推薦：

詳解cookie解決微信無法儲存localStorage的問題

HTML5 localStorage知識點總結

使用HTML5中的localStorage實作記住密碼功能

以上是實例詳解vue中使用localstorage來儲存頁面信息的詳細內容。更多資訊請關注PHP中文網其他相關文章！