快捷導(dǎo)航

vue中使用localstorage來(lái)存儲(chǔ)頁(yè)面信息

更新時(shí)間：2017年11月04日 08:36:43 作者：愛(ài)喝酸奶的吃貨

這篇文章主要介紹了vue中使用localstorage來(lái)存儲(chǔ)頁(yè)面信息,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

今天小穎在跟著慕課網(wǎng)學(xué)習(xí)vue，不學(xué)不知道，一學(xué)嚇一跳，學(xué)了才發(fā)現(xiàn)，我之前知道的只是vue的冰山一角，嘻嘻，今天把小穎跟著慕課網(wǎng)學(xué)習(xí)的demo，給大家分享下，希望對(duì)大家有所幫助嘻嘻。

環(huán)境搭建：

參考：vue API

超簡(jiǎn)單的Vue.js環(huán)境搭建教程

詳情：

npm install --global vue-cli

vue init webpack vue-project

然后：

cd vue-project

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

npm run dev

我們就在瀏覽器看到：

但我們最終要實(shí)現(xiàn)：

如何實(shí)現(xiàn)如圖的效果呢？

1.將App.vue修改為：

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

</script>
<style>
#app {
 font-family: 'Avenir', 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>

對(duì)于初學(xué)vue的同學(xué)，可能對(duì)于watch可能不太熟悉，那就麻煩大家移步到 vue API 或參考下小穎之前寫(xiě)的文章：vue——實(shí)例方法 / 數(shù)據(jù)

2.在與App.vue同級(jí)目錄下，新建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.在項(xiàng)目中打開(kāi)cmd窗口，運(yùn)行：npm run dev,就完成啦嘻嘻。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vuex入門(mén)教程,圖文+實(shí)例解析
這篇文章主要介紹了vuex入門(mén)教程，圖文+實(shí)例解析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。
2022-03-03
element實(shí)現(xiàn)合并單元格通用方法
這篇文章主要介紹了element實(shí)現(xiàn)合并單元格通用方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-11-11
vue.js父子組件傳參的原理與實(shí)現(xiàn)方法
這篇文章主要介紹了vue.js父子組件傳參的原理與實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了vue.js父子組件傳參的基本原理、實(shí)現(xiàn)方法與相關(guān)操作注意事項(xiàng),需要的朋友可以參考下
2023-04-04
vue+iview 實(shí)現(xiàn)可編輯表格的示例代碼
這篇文章主要介紹了vue+iview 實(shí)現(xiàn)可編輯表格的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-10-10
vue-router之解決addRoutes使用遇到的坑
這篇文章主要介紹了vue-router之解決addRoutes使用遇到的坑，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-07-07
前端vue項(xiàng)目debugger調(diào)試操作詳解
在vue項(xiàng)目調(diào)試的時(shí)候,代碼里面標(biāo)注debugger,這篇文章主要給大家介紹了關(guān)于前端vue項(xiàng)目debugger調(diào)試操作的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下
2024-05-05
mpvue將vue項(xiàng)目轉(zhuǎn)換為小程序
這篇文章主要介紹了mpvue將vue項(xiàng)目轉(zhuǎn)換為小程序的相關(guān)資料及mpvue開(kāi)發(fā)流程，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2018-09-09
vue-cli中vue本地實(shí)現(xiàn)跨域調(diào)試接口
這篇文章主要介紹了vue-cli中vue本地實(shí)現(xiàn)跨域調(diào)試接口,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-01-01
vue3表單輸入綁定方式
這篇文章主要介紹了vue3表單輸入綁定方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-07-07
vue如何實(shí)現(xiàn)簡(jiǎn)易流程圖
這篇文章主要介紹了vue如何實(shí)現(xiàn)簡(jiǎn)易流程圖問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10