html5dev/webstorage.html at master · kzth/html5dev · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!doctype html>
<html lang=ja>
  <head>
    <title>Web Storage</title>
    <meta charset=utf-8>
  </head>
  <body>
    <div id="result"></div>
    <script>
      // sessionStorageが利用できるかの確認
      if (window.sessionStorage) {
        window.alert("Session Storageを利用できます");
      } else {
        window.alert("Session Storageを利用できません");
      }

      // localStorageが利用できるかの確認
      if (window.localStorage) {
        window.alert("Local Storageを利用できます");
      } else {
        window.alert("Local Storageを利用できません");
      }

      // Web Storageを利用する
      var storage = sessionStorage;
      storage.setItem("foo", "bar");
      storage["test"] = "test2";

      var obj = {
        "sss": "sss2",
        "aaa": "aaa2"
      };
      storage.setItem("key", JSON.stringify(obj));

      // Local Storageを利用する
      // だいたい上と同じ
      localStorage.setItem("foo2", "bar2");

      // データの数の取得
      console.log(storage.length);

      // n番目のキーを取得する
      console.log(storage.getItem(storage.key(1)));

      // Storageの削除
      storage.removeItem("foo");
      console.log(storage.getItem("foo"));

      // すべてのデータを削除する
      storage.clear();

      // Web Storageのイベント
      // 未実装のブラウザが多い 2012.6.3
      window.addEventListener("storage", function(event) {
        document.getElementById("result").innerHTML = "イベント発生のkey : " + event.key
          + "<br />新しいvalue : " + event.newValue
          + "<br />イベントが発生したURL : " + event.url
          + "<br />イベントが発生したストレージ" + event.storageArea;
      }, false);
    </script>
  </body>
</html>