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に値をセットする

localStorage.setItem('val', 'aiueo');

keyを「val」、値を「aiueo」として値をセットします。

localStorageの文字列を取得する

セットされた値を取り出す際には以下のようにします。

console.log(localStorage.getItem('val'));

「aiueo」と表示されます。

localStorageにJSONをセットする

var jsonVal = {val1:'aiueo', val2:'kakikukeko'};
localStorage.setItem('jsonVal', JSON.stringify(jsonVal));

jsonを一旦文字列に変換（JSON.stringify）してから、localStorageにセットします。

localStorageのJSONを取得する

JSON形式の値を取得するときには、以下のように一度文字列をJSON形式に戻して（JSON.parse）から、その中のkeyを指定して値を取り出します。

var val1= JSON.parse(localStorage.getItem('jsonVal')).val1;
var val2= JSON.parse(localStorage.getItem('jsonVal')).val2;

val1には「aiueo」、val2には「kakikukeko」が入ります。

localStorageの中身を削除する

最後に削除する場合です。

localStorage.removeItem('val');
localStorage.removeItem('jsonVal');

これでlocalStorageのkey指定した項目を削除できます。

localStorageの確認方法

localStorageに何が格納されているかはブラウザのデベロッパーツールを使用して確認ができます。
Chromeの場合であれば、「Application＞Storage＞local Storage」で確認できます。

感想

localStorageはWebアプリを作成する上で非常に便利な機能です。
値の保存や取得なども非常に簡単にできるので、活用していきたいと思います。
一方、ブラウザに残る情報なので保存する情報を何にするのかも意識しておく必要がありますね。

WEBアプリケーション関連 人気連載リンク

基礎からPHPWEBアプリ解発を学ぶなら・・
PHP基礎 連載

より実践的なWEBアプリ開発講座！Bootstrap活用を学ぶなら・・
魁！小野の塾 連載