HTML5
localStorage
webstorageapi

WebStorage API(LocalStorage)を使ってみた

More than 1 year has passed since last update.

WebStorage APIってなに?

ユーザのローカル(ブラウザ?)にデータを保存するための仕組み。
ローカルで扱えるデータベースを思っていただければ良いかなと。
データの保存・上書き・削除・全クリアなどの操作は、JavaScriptで行う。

クッキーとの違いは?

  • 有効期限なく永続的に利用できる
  • 5MBまで利用できる(クッキーは4KBまで)
  • 必要時に利用できる(クッキーはサーバーアクセス時に自動送信)

基礎知識

  • 基本は key value のペアで保存
  • ドメイン&ブラウザごとに格納される
  • モバイルでも使える
  • 値は必ず 文字列 で保存される

サンプル用のファイルを作ってみた

まあ使って見る前に簡単にサンプル用のソース書いたので、コピペして使ってください。

index.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>WebStrage API</title>
<script type="text/javascript">
  function init() {
  }
</script>
</head>
<body onload="init()">
  <div id="result"></div>
</body>
</html>

以下から、上記の function init() {} 内にwebStrageの操作のためのソースを書いていきます。

データを追加してみる setItem(key, value)

Artistic という値を持った Hashikawa を追加してみましょう。

function init() {
  localStorage.Hashikawa = "Artistic";
  localStorage["Hashikawa"] = "Artistic";
  localStorage.setItem("Hashikawa", "Artistic");
  //上記3行、どの書き方でも同じ
}

index.html を読み込むとデータが追加される。はず。
って、データを追加したのはいいけど、確認のしようがないねorz

データを抽出&表示してみる getItem(key)

上記で追加したデータを抽出してみよう。

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; の上に、以下を追記してみよう。

function init() {
  ・・・・・
  localStorage.removeItem("Hashikawa");  

  var val = localStorage.Hashikawa;
 ・・・・・
}

ページをリロードすると、先ほど表示された Artistic が今度は表示されなくなるか、undefined を返します。

全てのデータを削除する clear()

localStorageに保存されているすべてのデータを削除するには clear() を使う。

まずはいくつかデータを追加してみよう。

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() で一個だけ削除してみましょう。

function init() {
  ・・・・・  
  localStorage.setItem("E", "Eだよ");  

  localStorage.removeItem("B");
  ・・・・・
}

これを実行すると、
Aだよ null Cだよ Dだよ Eだよ
こうなります。
Bがないので、 null を返されました。

次に、 clear() を使って、全部削除してみましょう。

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をもっとデータベースライクに使う方法