vue中使用localstorage
Posted HongMaJu
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue中使用localstorage相关的知识,希望对你有一定的参考价值。
1、store.js(读取写入到localstorage)
const STORAGE_KEY="todos-vuejs" export default{ fetch(){ return JSON.parse(window.localStorage.getItem( STORAGE_KEY||"[]")) }, save(items){ window.localStorage.setItem(STORAGE_KEY,JSON.stringify(items)) } }
2、App.vue
<template> <div id="app"> <h1>{{title}}</h1> <h1 v-text="title"></h1> <h1 v-html="title"></h1> <input type="text" v-model="newItem" v-on:keyup.enter="addNew"> <ul> <li v-for="item in items" v-bind:class="{finished:item.isFinished}" v-on:click="toggleFinish(item)"> {{item.label}} </li> </ul> </div> </template> <script> import Store from ‘./Store‘ //console.log(Store) export default { data () { return { title: ‘<span>?</span>this is a todolist‘, items:Store.fetch(), // items:[ // { // label:‘coding‘, // isFinished:false // }, // { // label:‘walking‘, // isFinished:true // } // ], newItem:‘‘ } }, watch:{ items:{ handler:function(items){ // console.log(val,oldVal) // console.log(items); Store.save(items); // console.log(items); } }, deep:true//也检测items内部的key的变化 }, methods:{ toggleFinish:function(item){ // console.log(item); item.isFinished=!item.isFinished; console.log(this.items); }, addNew:function(){ // this.newItem; // console.log(this.newItem); this.items.push({ label:this.newItem, isFinished:false }) this.newItem=‘‘; } } } </script> <style> .finished{ text-decoration:underline; } #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; } </style>
以上是关于vue中使用localstorage的主要内容,如果未能解决你的问题,请参考以下文章