1. tfrcm

    Posted

    tfrcm
Changes in title
+WebStorage 入門
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,93 @@
+# WebStorage 入門
+
+# 概要
+
+Electronやハイブリットアプリ開発の際に、ローカルにデータを持たしたいと思い再入門しました。
+ざっくりいうと、WebStorageとはブラウザにデータを保存しておく為の仕組みです。
+Cookieよりも高機能です。(永続的なデータ保存・ストレージ容量が4MB)
+
+# 注意点
+
+ブラウザにより使えない場合がある。
+最新のブラウザなら基本なんでも大丈夫です。
+(IE8以上なら大丈夫。)
+
+# ルール
+
+同一オリジンでデータを保存します。
+
+## オリジンとは
+
+URLっぽいものの事。
+
+http://(スキーム)localhost(ホスト):8000(ポート) = オリジン
+
+**同じ端末(ブラウザ)で同じオリジンなら同じWebStorageが使える。**
+
+# WebStorageの種類
+
+## sessionStorage
+
+タブが閉じられるまで有効。
+タブが複数でも異なるStorageになる。
+
+keyとvalueで保存される。
+
+### メソッド
+
+|Method|Description|
+|------|-----------|
+|sessionStorage.setItem(key, value)|sessionStorageにデータを保存する。|
+|sessionStorage.getItem(key)|sessionStorageのデータを取得する。|
+|sessionStorage.removeItem(key)|sessionStorageのデータを削除する。|
+|sessionStorage.clear()|sessionStorageのデータを全件削除する。|
+|sessionStorage.length|sessionStorageのkey数を返す。|
+
+
+## localStorage
+
+ブラウザ自体にずっと保存。
+複数タブでも有効。
+(基本localStorageを使うのがベターです。)
+
+|Method|Description|
+|------|-----------|
+|localStorage.setItem(key, value)|localStorageにデータを保存する。|
+|localStorage.getItem(key)|localStorageのデータを取得する。|
+|localStorage.removeItem(key)|localStorageのデータを削除する。|
+|localStorage.clear()|localStorageのデータを全件削除する。|
+|localStorage.length|localStorageのkey数を返す。|
+
+## オブジェクトを保存する
+
+key, valueのvalueをオブジェクトにしたい事があるかと思います。
+その際は、JSON.stringify(value)とJSON.parse(key)を使います。
+
+### setItem時
+JSON.stringify(value)
+
+### getItem時
+JSON.parse(key)
+
+## イベント
+
+複数タブなどを開いている場合に、データの整合性を取るイベントがあります。
+storageに何らかの変更があったらイベントをキャッチします。
+
+```js
+
+ localStorage.setItem('name', 'jack');
+ window.addEventListener('storage', (e) => {
+ console.log(e.key); // key
+ console.log(e.oldValue); //古い値
+ console.log(e.newValue); //変更後の値
+ console.log(e.storageArea); //変化があった時の、storageのデータ全体をオブジェクトで取得
+ console.log(e.url); //オリジン
+ });
+```
+
+# 終わり
+
+WebStorageを使えば、簡単に端末(ブラウザ)毎にデータを残す事ができます。
+てっとり早くデータを保存したい時や、ローカル端末にデータを残したい時などにはうってつけです。
+セキュリティ的な観点では、もう少し調査が必要なので、次回はそちらの調査結果を書こうと思います。