vue.jsからローカルストレージの値を操作する

ローカルストレージに値をセットしたり、ローカルストレージから値を取得したりしたいことがあったので、試して記事に残してみました。

はじめに

通常ローカルストレージには機密情報は保存してはいけません。
僕の場合は永続的に保存したい設定値を保存する際に用いる事が多いです。← 設定値は別に流出されても全然何の問題もないような情報です。

ローカルストレージに機密情報を保存してはいけない理由はJavaScriptから参照できてしまうからです。XSS脆弱性を代表に、JavaScriptを用いてローカルストレージやCookieから情報を抜き取られる可能性がないとはいい切れません。安全の為にローカルストレージには情報を入れないようにしましょう。

こちらの記事で詳しく解説しています。
JWTトークンはLocalStorageではなくHTTP OnlyでSecureなCookieに保存しよう

Vue.jsでローカルストレージを扱う

ライブラリは何も必要ありません。

例えば optionという名前でローカルストレージに設定を保存したい場合はこのように書きます。

localStorage.setItem('option', '設定値')

そして、optionの値をローカルストレージから取得したい場合はこのように記述します。

localStorage.getItem('option')

もしローカルストレージにoptionっていう名前の情報がセットされていない場合は、 null が帰ってきます。

終わりに

ローカルストレージを操作する方法が簡単すぎてびっくりしました。
機密情報には十分に注意して、みなさんもローカルストレージをうまく使ってみてください。