#WebStorage APIってなに？
ユーザのローカル（ブラウザ？）にデータを保存するための仕組み。
ローカルで扱えるデータベースを思っていただければ良いかなと。
データの保存・上書き・削除・全クリアなどの操作は、JavaScriptで行う。
#クッキーとの違いは？
- 有効期限なく永続的に利用できる
- 5MBまで利用できる（クッキーは4KBまで）
- 必要時に利用できる（クッキーはサーバーアクセス時に自動送信）
#基礎知識
- 基本は
keyvalueのペアで保存 - ドメイン&ブラウザごとに格納される
- モバイルでも使える
- 値は必ず
文字列で保存される
#サンプル用のファイルを作ってみた
まあ使って見る前に簡単にサンプル用のソース書いたので、コピペして使ってください。
<!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");
//上記３行、どの書き方でも同じ
}
index.html を読み込むとデータが追加される。はず。
って、データを追加したのはいいけど、確認のしようがないねorz
#データを抽出＆表示してみる getItem(key)
上記で追加したデータを抽出してみよう。
function init() {
・・・・・
var val = localStorage.Hashikawa;
var val = localStorage["Hashikawa"];
var val = localStorage.getItem("Hashikawa");
// 上記３行、どの書き方でも同じ
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をもっとデータベースライクに使う方法