vue实现本地存储添加删除修改功能

实现本地存储添加删除修改功能，可以通过vue的官方插件vue-localStorage进行实现。

安装vue-localStorage插件

首先需要在项目中安装vue-localStorage插件，可以通过npm进行安装：

npm install vue-localstorage --save

在main.js中引入插件

在main.js文件中，引入vue-localStorage插件并在Vue中进行全局注册：

import VueLocalStorage from 'vue-localstorage'

Vue.use(VueLocalStorage)

使用localstorage存储数据

通过vue-localStorage插件提供的$LocalStorage对象实现数据的本地存储。例如下列代码存储一个数组到localStorage中：

this.$localStorage.set('todos', [
    {id: 1, text: '学习Vue', done: false},
    {id: 2, text: '学习React', done: false},
    {id: 3, text: '学习Angular', done: true}
])

读取localstorage中的数据

读取localStorage中的数据可以使用$localStorage.get方法。例如下列代码获取名为‘todos’的存储数据：

const todos = this.$localStorage.get('todos')

修改localstorage中的数据

可以通过修改数组对象中的某个属性来更新localStorage中的数据。例如下列代码更新id为2的todo的done属性：

// 获取todos
const todos = this.$localStorage.get('todos')
// 查找id为2的todo
const todo = todos.find((t) => t.id === 2)
// 修改done属性
todo.done = true
// 将修改后的数据存入localStorage
this.$localStorage.set('todos', todos)

删除localstorage中的数据

可以通过数组的splice方法将某个元素从数组中删除，然后将更新后的数组再次存储到localStorage中。例如下列代码删除id为2的todo：

// 获取todos
let todos = this.$localStorage.get('todos')
// 查找id为2的todo的索引
const todoIndex = todos.findIndex((t) => t.id === 2)
// 从数组中删除该todo
todos.splice(todoIndex, 1)
// 将更新后的todos存入localStorage
this.$localStorage.set('todos', todos)

示例说明

下面两个示例说明分别对应添加和删除功能的实现。

示例一：添加功能

下列代码使用v-model绑定input的值，然后通过点击button将输入框中的值添加到存储的todos数组中：

<template>
  <div>
    <input type="text" v-model="newTodo">
    <button @click="addTodo">添加</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newTodo: ''
    }
  },
  methods: {
    addTodo() {
      let todos = this.$localStorage.get('todos') || []
      const newId = todos.length ? todos[todos.length - 1].id + 1 : 1
      todos.push({id: newId, text: this.newTodo, done: false})
      this.$localStorage.set('todos', todos)
      this.newTodo = ''
    }
  }
}
</script>

示例二：删除功能

下列代码根据todo的id查找并删除todo，实现删除功能：

<template>
  <div>
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        {{ todo.text }}
        <button @click="deleteTodo(todo.id)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      todos: []
    }
  },
  created() {
    // 从localStorage中读取todos
    this.todos = this.$localStorage.get('todos') || []
  },
  methods: {
    deleteTodo(id) {
      let todos = this.$localStorage.get('todos')
      const todoIndex = todos.findIndex((t) => t.id === id)
      todos.splice(todoIndex, 1)
      this.$localStorage.set('todos', todos)
    }
  }
}
</script>