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