Vue3で使うlocalStorage

概要

vue3(JavaScript)でlocalStorageを利用する際に引っかかったところがいくつかあったので、簡単にまとめました。

実行環境

• MacBook Pro (OS:Monterey)
• エディタはVisual Studio Code

localStorageとは

簡単に言うと、WEBサイトを閲覧するブラウザに容量を少し確保して、そこでデータを管理できるようにする機能。
基本的に、手動で削除しない限りデータは永久的に残るとされているが、たまに勝手に消えてることもある。

また、管理するデータは基本的には文字列なので、配列などを保管する場合には別途で変換処理が必要。

基本機能

VueでlocalStorageを利用する場合、4つのコードを使い分けてデータの処理を行います。

① getItem

localStorageからデータを取得するためのコードです。

localStorage.getItem('KEY')

KEYにはsetItemを行った際に設定した文字列が入ります。

実例>

localStorageから「test_item」というKEYのデータを取得し、dataという変数に入れたい場合

let data = localStorage.getItem("test_item")

これで、変数dataにはtest_itemに保管されていたデータが丸々入ります。

②setItem

localStorageへデータを保存するためのコードです。

localStorage.setItem('KEY', データ)

KEYには任意の文字列(アルファベット,数字,一部記号のみ対応)を設定します。

実例>

localStorageから「test_item」というKEYで"hello"という文字列を保存したい場合

localStorage.setItem("test_item", "hello")

これで、test_itemには"hello"という文字列が保管されます。

③removeItem

localStorageにあるデータの一部を削除するためのコードです。

localStorage.removeItem('KEY')

KEYにはsetItemを行った際に設定した文字列が入ります。

実例>

localStorageから「test_item」というKEYのデータを削除したい場合

localStorage.removeItem("test_item")

これで、localStorageからはtest_itemというKEY及びそのデータが消えます。

④clear

localStorageにあるデータを全て削除するためのコードです。

localStorage.clear()

clearに関してはKEYの指定は不要で、実行するとlocalStorageの全データが初期化されます。

##　扱うデータが配列型の場合
localStorageにはString型(文字列)での保存のみ対応しています。
そのため、配列型(や連想配列型)のデータを扱う場合には、一旦変換処理が必要です。

配列を保存したい時

以下のコードで、データをString型に変換することができます。

//このデータをlocalStorageに保存したい
let data = [りんご,リンゴ,apple,Apple]

//変換処理
let conv_data = JSON.stringify(data)
g
//localStorageへ保存
localStorage.setItem("new_data", data)

配列データを取り出したい時

以下のコードで、String型のデータを配列型に戻すことができます。

//localStorageからデータを取り出す
let data = localStorage.getItem("new_data")

//変換処理
let conv_data = JSON.parse(data)

これで、配列型に変換できます。

ページ読み込み時にデータ取得したい

vue3ならonMountedが適しています。

実例

<script>
import {ref, onMounted} from 'vue'

export default {
  name: 'Home',
  setup(){
    let data = ref('')
----------------
省略
----------------
//　onMountedで自動取得
    onMounted(() => {
      getData()
    });

    return{
      data,
      getData()
    }
  }

テストコード

コピペで動作を確認できるデータです。
Vue CLIなどでプロジェクト作成後、HOME.vue, App.vueなどのメインファイルの中身をこちらに書き換えてください。

<template>
  <div class="home">

// 取得フォーム
　　　　　　　　<div class="get-data-form">
      <button @click="getData()">ローカルストレージから取得</button>
      <p>{{main_data}}</p>
    </div>

// 一部削除フォーム
    <div>
      <input class="remove-input-button" v-model="remove_key">
      <button @click="removeData()">一部のデータを削除</button>
    </div>

// 入力フォーム
    <div class="input-form">
      <input class="input-data" v-model="input_data">
      <button @click="saveData()">ローカルストレージへ保存</button>
    </div>

//　全削除ボタン
    <div class="remove-button">
      <button @click="clearData()">ローカルストレージデータを全削除</button>
    </div>
  </div>
</template>

<script>
import {ref, onMounted} from 'vue'

export default {
  name: 'Home',
  setup(){

//　取得データ
    let main_data = ref('')

//　入力データ
    let input_data = ref('')

// 削除KEY
    let remove_key = ref('')

//　データを保存
    const saveData=()=>{
      let data = JSON.stringify(input_data.value)
      localStorage.setItem('main_data', data)
      input_data.value = ''
      alert('ローカルストレージへ保存しました。')
    }

// データを一部削除
   const removeData=()=>{
     localStorage.removeItem(remove_key.value)
     alert( remove_key.value +'を削除しました。')
     remove_key.value = ''
   }

//データを全削除
   const clearData=()=>{
     localStorage.clear()
     alert('データを全削除しました')
   }

// データを取得
    const getData=()=>{
      let data = JSON.parse(localStorage.getItem('main_data'))
      main_data.value = data
    }

    onMounted(() => {
      getData()
    });


    return{
      main_data,
      input_data,
      remove_key,
      saveData,
      getData,
      removeData,
      clearData,
    }
  }
}
</script>

以上。
活用次第でゲームの作成やオフラインアプリの作成などもできそう。