--- title: WebStorage API(LocalStorage)を使ってみた tags: webstorageapi HTML5 localStorage author: masamitsu-konya slide: false --- #WebStorage APIってなに? ユーザのローカル(ブラウザ?)にデータを保存するための仕組み。 ローカルで扱えるデータベースを思っていただければ良いかなと。 データの保存・上書き・削除・全クリアなどの操作は、JavaScriptで行う。 #クッキーとの違いは? - 有効期限なく永続的に利用できる - 5MBまで利用できる(クッキーは4KBまで) - 必要時に利用できる(クッキーはサーバーアクセス時に自動送信) #基礎知識 - 基本は `key` `value` のペアで保存 - ドメイン&ブラウザごとに格納される - モバイルでも使える - 値は必ず `文字列` で保存される #サンプル用のファイルを作ってみた まあ使って見る前に簡単にサンプル用のソース書いたので、コピペして使ってください。 ```index.html WebStrage API
``` 以下から、上記の `function init() {}` 内にwebStrageの操作のためのソースを書いていきます。 #データを追加してみる setItem(key, value) `Artistic` という値を持った `Hashikawa` を追加してみましょう。 ```js function init() { localStorage.Hashikawa = "Artistic"; localStorage["Hashikawa"] = "Artistic"; localStorage.setItem("Hashikawa", "Artistic"); //上記3行、どの書き方でも同じ } ``` `index.html` を読み込むとデータが追加される。はず。 って、データを追加したのはいいけど、確認のしようがないねorz #データを抽出&表示してみる getItem(key) 上記で追加したデータを抽出してみよう。 ```js function init() { ・・・・・ var val = localStorage.Hashikawa; var val = localStorage["Hashikawa"]; var val = localStorage.getItem("Hashikawa"); // 上記3行、どの書き方でも同じ document.querySelector("#result").innerHTML = val; } ``` `Artistic` という値が表示される。 #データを削除してみる removeItem(key) 削除は `localStorage.removeItem(key)` でできる。 上記で書いた ` var val = localStorage.Hashikawa;` の上に、以下を追記してみよう。 ```js function init() { ・・・・・ localStorage.removeItem("Hashikawa"); var val = localStorage.Hashikawa;  ・・・・・ } ``` ページをリロードすると、先ほど表示された `Artistic` が今度は表示されなくなるか、`undefined` を返します。 #全てのデータを削除する clear() localStorageに保存されているすべてのデータを削除するには `clear()` を使う。 まずはいくつかデータを追加してみよう。 ```js function init() { localStorage.setItem("A", "Aだよ"); localStorage.setItem("B", "Bだよ"); localStorage.setItem("C", "Cだよ"); localStorage.setItem("D", "Dだよ"); localStorage.setItem("E", "Eだよ"); var val = localStorage.getItem("A") + " " + localStorage.getItem("B") + " " + localStorage.getItem("C") + " " + localStorage.getItem("D") + " " + localStorage.getItem("E"); document.querySelector("#result").innerHTML = val; } ``` これを実行すると、 `Aだよ Bだよ Cだよ Dだよ Eだよ` こう表示されますね。 では、ひとまず、`removeItem()` で一個だけ削除してみましょう。 ```js function init() { ・・・・・ localStorage.setItem("E", "Eだよ"); localStorage.removeItem("B"); ・・・・・ } ``` これを実行すると、 `Aだよ null Cだよ Dだよ Eだよ` こうなります。 Bがないので、 `null` を返されました。 次に、 `clear()` を使って、全部削除してみましょう。 ```js function init() { ・・・・・ localStorage.setItem("E", "Eだよ"); localStorage.clear(); ・・・・・ } ``` すると、 `null null null null null` 全部 `null` になっちゃった! ということで、全部削除できました。 これがWebStrage APIです。 #SessionStorageっていうのもある `localStrage` の他に、 `sessionStorage` というAPIもあります。 使い方は `localStrage` と一緒。 名前からもわかる通り、 `sessionStorage` = 同セッションのみで使用できる `localStorage` = セッションが切れても保持し続ける と言った違いがあります。 #もっとデータベースライクに使いたい人はこちら キー、バリューじゃ物足りないよ! という人は、JSON使ってもっとデータベースライクに使えます。 以下の記事参照 [LocalStorageをもっとデータベースライクに使う方法](http://qiita.com/masamitsu-konya/items/ce7f6469434076448238)