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>
```

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