localStorageの使い方｜AngularでWebサイト作成
Angularの学習の為に、AngularでWebサイトを作ってみることにしました（Angularのバージョンは4.3.6です）。
適宜作業内容をまとめていきます。
基本的な部分は公式チュートリアルなどを参考にしながら進めています。
今回はAngularでlocalStorageを使ってみます。
Angularだからといって特別なことをするわけでもなく、普通のjavascriptと同じです。
開発環境
・OS：Windows8.1 64bit
・node：v7.2.1
・npm：4.0.5
・Angular：4.3.6
・開発ツール：VisualStudioCode
AngularでlocalStorageを操作する
localStorageに値をセットする
1 | localStorage.setItem('val', 'aiueo'); |
keyを「val」、値を「aiueo」として値をセットします。
localStorageの文字列を取得する
セットされた値を取り出す際には以下のようにします。
1 | console.log(localStorage.getItem('val')); |
「aiueo」と表示されます。
localStorageにJSONをセットする
1 2 | var jsonVal = {val1:'aiueo', val2:'kakikukeko'};localStorage.setItem('jsonVal', JSON.stringify(jsonVal)); |
jsonを一旦文字列に変換（JSON.stringify）してから、localStorageにセットします。
localStorageのJSONを取得する
JSON形式の値を取得するときには、以下のように一度文字列をJSON形式に戻して（JSON.parse）から、その中のkeyを指定して値を取り出します。
1 2 | var val1= JSON.parse(localStorage.getItem('jsonVal')).val1;var val2= JSON.parse(localStorage.getItem('jsonVal')).val2; |
val1には「aiueo」、val2には「kakikukeko」が入ります。
localStorageの中身を削除する
最後に削除する場合です。
1 2 | localStorage.removeItem('val');localStorage.removeItem('jsonVal'); |
これでlocalStorageのkey指定した項目を削除できます。
localStorageの確認方法
localStorageに何が格納されているかはブラウザのデベロッパーツールを使用して確認ができます。
Chromeの場合であれば、「Application＞Storage＞local Storage」で確認できます。
感想
localStorageはWebアプリを作成する上で非常に便利な機能です。
値の保存や取得なども非常に簡単にできるので、活用していきたいと思います。
一方、ブラウザに残る情報なので保存する情報を何にするのかも意識しておく必要がありますね。
WEBアプリケーション関連 人気連載リンク
基礎からPHPWEBアプリ解発を学ぶなら・・
PHP基礎 連載
より実践的なWEBアプリ開発講座！Bootstrap活用を学ぶなら・・
魁！小野の塾 連載
