快捷導(dǎo)航

vue中使用localstorage來存儲(chǔ)頁面信息

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

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

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

環(huán)境搭建：

參考：vue API

超簡單的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>

對于初學(xué)vue的同學(xué)，可能對于watch可能不太熟悉，那就麻煩大家移步到 vue API 或參考下小穎之前寫的文章：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)目中打開cmd窗口，運(yùn)行：npm run dev,就完成啦嘻嘻。

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

您可能感興趣的文章:

相關(guān)文章

Vue3新屬性之css中使用v-bind的方法（v-bind?in?css）
這篇文章主要介紹了Vue3新屬性css中使用v-bind（v-bind?in?css）的方法，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2023-01-01
使用webpack搭建vue項(xiàng)目及注意事項(xiàng)
這篇文章主要介紹了使用webpack搭建vue項(xiàng)目的方法，本文以開發(fā)環(huán)境為例，通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-06-06
Vue組件通信實(shí)踐記錄（推薦）
本篇文章主要介紹了Vue組件通信實(shí)踐記錄（推薦），小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-08-08
Vue2中無法監(jiān)聽數(shù)組和對象的某些變化問題
這篇文章主要介紹了Vue2中無法監(jiān)聽數(shù)組和對象的某些變化問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
Vue編譯器optimize源碼分析
這篇文章主要為大家介紹了Vue?編譯器optimize源碼分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07
Vue CLI 3.x 自動(dòng)部署項(xiàng)目至服務(wù)器的方法
本教程講解的是 Vue-CLI 3.x 腳手架搭建的vue項(xiàng)目, 利用scp2自動(dòng)化部署到靜態(tài)文件服務(wù)器 Nginx。非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2019-04-04
vue中正確使用jsx語法的姿勢分享
這篇文章主要給大家介紹了關(guān)于vue中正確使用jsx的相關(guān)資料,JSX就是Javascript和XML結(jié)合的一種格式,React發(fā)明了JSX,利用HTML語法來創(chuàng)建虛擬DOM,當(dāng)遇到<,JSX就當(dāng)HTML解析,遇到{就當(dāng)JavaScript解析,需要的朋友可以參考下
2021-07-07
vue實(shí)現(xiàn)button按鈕的重復(fù)點(diǎn)擊指令方式
這篇文章主要介紹了vue實(shí)現(xiàn)button按鈕的重復(fù)點(diǎn)擊指令方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-08-08
vue中常用的rules驗(yàn)證方式總結(jié)
這篇文章主要為大家詳細(xì)介紹了vue中常用的幾種表單rules驗(yàn)證方式,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-10-10
詳解在Vue中如何使用provide與inject
在vue2.0里面provide與inject是以選項(xiàng)式(配置)API的方式在組件中進(jìn)行使用的,解決的是跨組件(祖孫)間通信的一種方式，本文就來聊聊它們在Vue中具體的使用吧
2023-03-03