Vue.jsでデータをブラウザのローカルストレージに保存する

公式のクライアントサイドストレージを使えばできる。

単純な値の場合は、localStorage.nameでアクセスできるが、配列とかオブジェクトの複雑な値の場合、JSON形式に変換したりしてから、localStorage.getItem()localStorage.setItem()を行う必要がある。

以下は公式のTodoアプリの記述を参考にして、一ファイルにクライアントサイドストレージの機能をまとめてみたもの。

// /src/services/todoStorage.js  
const STORAGE_KEY = 'todos'  
const todoStorage = {  
  fetch() {  
    const todos = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]')  
    todos.forEach((todo, index) => {  
      todo.id = index  
    })  
    todoStorage.uid = todos.length  
    return todos  
  },  
  save(todos) {  
    localStorage.setItem(STORAGE_KEY, JSON.stringify(todos))  
  }  
}  

export default todoStorage  

これをコンポーネント側でインポートして、以下のように使用できる。

<script>  
import todoStorage from '@/services/todoStorage'  

export default {  
  name: 'TodoList',  
  data() {  
    return {  
      newTodo: '',  
      todos: todoStorage.fetch(),  
    }  
  },  
  watch: {  
    todos: {  
      handler(todos) {  
        todoStorage.save(todos)  
      },  
      deep: true,  
    },  
  },  
  methods: {  
    addTodo() {  
      const value = this.newTodo.trim()  
      if (!value) {  
        return  
      }  

      this.todos.push({  
        id: todoStorage.uid++,  
        title: value,  
        completed: false,  
      })  

      this.newTodo = ''  
    },  
    removeTodo(id) {  
      this.todos = this.todos.filter(todo => todo.id !== id)  
    },  
  },  
}  
</script>  

todoStorage.fetch() でローカルストレージに保存されている配列の値を取得してきて、localStorage.save(todos)で変更を保存している。
また、配列todosに対してwatchで監視することで、変更ある度にローカルストレージの値を逐一更新している。

この辺も公式のTodoアプリを大いに参考にさせてもらった。