vue-local-storageを使ってみた

# 概要

vue.jsでlocalStorageを扱うvue-local-storageモジュールの使い方(保存、削除、取得)について簡単に紹介。
https://github.com/pinguinjkeke/vue-local-storage

## localStorageとは

Webブラウザ上でクライアントのデータを保存する仕組みのこと。

**特徴**

- 保存容量が5MB程度
- 保存期間は永久的
- データをkey-value形式で管理

*参考*

 - http://www.htmq.com/webstorage/
 - http://wp.tech-style.info/archives/742

## vue-local-storageのメリット

- お手軽
- vueモジュールとして扱える(コンポーネント単位に使用有無が管理できる)
- valueの型にObject,Array,String,Number,Booleanが使用できる

## Version

| module            |  version |  
|:-----------------|:-----:|
| vue               | 2.5.2 | 
| vue-localstorage  | 0.6.2 |

## install

```
$ npm install vue-localstorage --save
```

### 使用方法
まず、プラグインの使用を宣言する。

```javascript:main.js
import VueLocalStorage from 'vue-localstorage'

Vue.use(VueLocalStorage)
```

次に登録したいデータのkey-valueを設定する。
上記の宣言でlocalStorageプロパティが使用でき、typeプロパティで型が設定可能(省略も可能)。
defaultプロパティを使用することで、値が未設定時に登録するデフォルト値が設定可能。
localStorageオブジェクトのプロパティには設定したいkey名を設定する。
※ここでは説明のためわかりやすく○○Keyとしている。

```javascript:
new Vue({
  localStorage: {
    stringKey: {
      type: String
    },
    numberKey: {
      type: Number
    },
    booleanKey: {
      type: Boolean
      default: true
    },
    listKey: {
      type: Array
    },
    objectKey: {
      type: Object,
      default: {
        val: 'default'
      }
    },
    noTypeKey: ''
  }
})
```

### データ保存

this.$localStorage.set(*key*,*value*)

### データ削除

this.$localStorage.remove(*key*)

### データ取得

this.$localStorage.get(*key*)


###　サンプルソース

画面上のUIで簡単にlocalStorageへの登録、削除、取得を確認できるようしたもの。
取得結果を出力する際は登録後に画面を一度リロードしてください。
※UIの構成についてはガラクタ同然のため悪しからず。。。

| vue file            |  概要 |  
|:-----------------|:-----:|
| LocalStorageEntry.vue | 保存用 | 
| LocalStorageGet.vue  | 出力用 |

localStorageの保存の確認にはGoogle Chromeのdebug consoleのApplicationタブでも確認できる。

```vue:LocalStorageEntry.vue
<template>
  <div>
    <p>
      <label>
        String：
        <input type="text" v-model="stringType">
      </label>
    </p>
    <p>
      <label>
        Number：
        <input type="text" v-model="numberType">
      </label>
    </p>
    <p>
      <label>
        Boolean：
        <input type="radio" name="boolean" value="true" v-model="booleanType">
        <label>True</label>
        <input type="radio" name="boolean" value="false" v-model="booleanType">
        <label>False</label>
      </label>
    </p>
    <div>
      <label>
        List：
        <div v-for="(item,i) in listType" :key="i">
          <input type="text" v-model="listType[i]">
        </div>
      </label>
    </div>
    <p>
      Object：
    </p>
    <p>
      <label>
        Name：
        <input type="text" v-model="objectType.name">
      </label>
      <label>
        Age：
        <input type="number" v-model="objectType.age">
      </label>
    </p>
    <div>
      Sex：
      <input type="radio" name="sex" value="0" v-model="objectType.sex">
      <label>man</label>
      <input type="radio" name="sex" value="1" v-model="objectType.sex">
      <label>woman</label>
    </div>
    <p>
      <button v-on:click="storeLocalStorage()">entry local storage</button>
      <button v-on:click="deleteLocalStorage()">delete local storage</button>
    </p>
  </div>

</template>

<script>
export default {
  name: 'LocalStorageView',
  localStorage: {
    stringKey: {
      type: String
    },
    numberKey: {
      type: Number
    },
    booleanKey: {
      type: Boolean
    },
    listKey: {
      type: Array
    },
    objectKey: {
      type: Object
    }
  },
  data: () => {
    return {
      stringType: 'Vue',
      numberType: 10,
      listType: [
        'item1', 'item2', 'item3'
      ],
      objectType: {
        name: 'John',
        age: 25,
        sex: '0'
      },
      booleanType: true
    }
  },
  methods: {
    storeLocalStorage: function () {
      this.$localStorage.set('stringKey', this.stringType)
      this.$localStorage.set('numberKey', this.numberType)
      this.$localStorage.set('booleanKey', this.booleanType)
      this.$localStorage.set('listKey', this.listType)
      this.$localStorage.set('objectKey', this.objectType)
    },
    deleteLocalStorage: function () {
      this.$localStorage.remove('stringKey')
      this.$localStorage.remove('numberKey')
      this.$localStorage.remove('booleanKey')
      this.$localStorage.remove('listKey')
      this.$localStorage.remove('objectKey')
    }
  }
}
</script>

```

```vue:LocalStorageGet.vue
<template>
  <div>
    <div>
      String：{{stringType}}
    </div>
    <div>
      Number：{{numberType}}
    </div>
    <div>
      Boolean：{{booleanType}}
    </div>
    <div>
      List：
      <li v-for="(item,i) in listType" :key="i">
        {{item}}
      </li>
    </div>
    <div>
      Object：
      <div v-if="Object.keys(objectType).length !== 0">
        <div>
          Name：{{objectType.name}}
        </div>
        <div>
          Age：{{objectType.age}}
        </div>
        <div>
          Sex:{{sex[objectType.sex]}}
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'LocalStorageGet',
  data: () => {
    return {
      stringType: '',
      numberType: 0,
      listType: [],
      objectType: {},
      booleanType: false,
      sex: ['man', 'woman']
    }
  },
  mounted () {
    this.stringType = this.$localStorage.get('stringKey', 'not entry')
    this.numberType = this.$localStorage.get('numberKey')
    this.listType = this.$localStorage.get('listKey')
    this.objectType = this.$localStorage.get('objectKey')
    this.booleanType = this.$localStorage.get('booleanKey')
  }
}
</script>

```



### その他
- localStorageオブジェクトで定義していないキーにsetした場合もエラーなく登録される
- typeで宣言した型と異なる型で登録した場合、自動で型変換される
- Vue.LocalStorage.get(*key*,*default*)でデフォルト値が使用できる。

### 感想

型宣言に対するエラー制御はしてないもののjavascript標準のlocalStorageではオブジェクトを登録する際に`JSON.stringify()`する手間があるため、オブジェクトごと登録できるのは便利。サーバーサイドのAPIが完成するまでの繋ぎに使えそう！