Web Storageとは-LocalStorage/SessionStorageの使い方- #JavaScript

みなさん、こんばんは！こんにちは！

今回は、ブラウザ内臓のweb storage（ウェブストレージ）についてです。

storage（ストレージ）とは

webブラウザに内蔵されているデータを保管する場所のこと。
データベースなどを用いずにブラウザ自身にデータを持たせることが出来る。

※よく似たものとして、クッキーがあるが全く違うものなので注意！

特徴	ストレージ	クッキー
データの期限	なし	あり（指定する）
データのサイズ	5MB	4KB
通信	しない	する

ストレージの種類

ストレージには大きく分けて２種類ある。

Local Storage（ローカルストレージ）
- ブラウザを閉じてもデータを維持。
- 破棄にはJSでデータのクリアまたは、ブラウザキャシュ/ローカルのクリアが必要
Session Storage（セッションストレージ）
- ブラウザ（または、タブ）を閉じるとデータは破棄される。

※一見するとLocal　Storageのほうが良さそうに見るが注意点がある。

Local Storageは明示的にデータを消さない限りは、ストレージにデータが残るので、

思わぬバグを引き起こす可能性がある。

使用中のブラウザでweb storageが使えるかの確認

web storageは、すべてのブラウザで使用できるわけではございません。

こちらのページを参考にお使いのブラウザで使用できるか確認しましょう。

ストレージにデータを保存する／取得する

ストレージを使う場合は、localStorage , sessionStorageプロパティを使う。

var storage = localStorage; // または、sessionStorage

ストレージへの保存は、setItemメソッド。

データの取得は、getItemメソッド。

storage.setItem(key, value);
storage.getItem(key);

データを削除する

データの削除は以下である。

storage.removeItem(key);
storage.clear(); //すべてのデータを削除

オブジェクトをストレージに保存する

今までのやり方で、ストレージにデータを保存することが出来る。

しかし、一つ一つ、keyとvalueをデータ化するには手間がかかるし、管理が難しくなってしまう。

そこで、オブジェクトをストレージに保存する。

前提として、ストレージに保存することが出来る型は、String型である。

そのため、オブジェクトをオブジェクトに似た記法で書かれているJSON形式（String型）に変換する。

オブジェクト => JSON文字列 => 保存
JSON文字列 => オブジェクトに復元 => 取得

var cat = {
    name: 'ねこ',
    color: 'white',
    age: 5
};

storage.setItem('cat', JSON.stringify(cat));
//Key=>cat/Value=>{"name":"ねこ","color":"white","age":5} - ①

var getData = JSON.parse(storage.getItem('cat'));
console.log(getData['name']); 
//=>　ねこ - ②

使用上の注意点

web storage（Localstorage/SessionStorage）は、とてもシンプルな仕組みです。

容量にも制限があります。

使用する場合は、以下のデータに当てはまる場合を推奨いたします。

重要な情報を一切含まない

極端なハイパフォーマンスを要求されない

5 MBに収まる

stringデータだけの情報

引用：HTML5のLocal Storageを使ってはいけない（翻訳）

ユーザーの個人情報、クレカ情報、IDなど。

他者にデータを取得されてはいけないデータに関しては情報漏洩に繋がりますので使用をしないようにしましょう。

まとめ

シンプルで便利な半面、セキュアでは無い一面も。

使用用途を明確にした上で取り入れましょう！

ただ、プログラミングを始めたばかりの方は、データのやり取りの勉強になるので一度触ってみてはいかがでしょうか？

以上。

Web Storageとは-LocalStorage/SessionStorageの使い方-