@ HTML

Web Storage:ウェブストレージ

データを保存する機能という意味でストレージという概念が使われます。

Web Storage とはブラウザで側で「キー」と「値」のペアー形式(key-value 型)でデータを保存する機能です。

Web Storage には sessionStorage と localStorage という 2 種類のストレージが用意されていて、目的に応じて使い分けられるようになっています。

sessionStorage

sessionStorage とはいウィンドウ事のセッションで有効なストレージです。ウィンドウ、タブが開いている間のみデータが保存され、ウィンドウ、タブが閉じられると、データは失われます。

ウィンドウ、タブ単位で有有効なストレージですので、同じドメインのサイトを別々のウィンドウで開いている場合には、ウィンドウ、タブ間での sessionStorage は別々となります。クッキーと違ってウィンドウ間でデータが共有されることはありません。

session_storage.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/sanitize.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script>
// Web Storageの実装確認
if (typeof sessionStorage === 'undefined') {
  window.alert("このブラウザはWeb Storage機能が実装されていません");
} else {
  window.alert("このブラウザはWeb Storage機能を実装しています");

  var storage = sessionStorage;

  // sessionStorageへの格納
  function setsessionStorage() {

    var key = document.getElementById("textkey").value;
    var value = document.getElementById("textdata").value;

    // 値の入力チェック
    if (key && value) {
      storage.setItem(key, value);
    }

    key = "";
    value = "";

    viewStorage();
  }

  // sessionStorageからのデータの取得と表示
  function viewStorage() {

    var list = document.getElementById("list")
    while (list.firstChild) list.removeChild(list.firstChild);

    // sessionStorageすべての情報の取得
    for (var i = 0; i < storage.length; i++) {
      var _key = storage.key(i);

      // sessionStorageのキーと値を表示
      var tr = document.createElement("tr");
      var td1 = document.createElement("td");
      var td2 = document.createElement("td");
      list.appendChild(tr);
      tr.appendChild(td1);
      tr.appendChild(td2);
      td1.innerHTML = _key;
      td2.innerHTML = storage.getItem(_key);
    }
  }

  // sessionStorageから削除
  function removeStorage() {
    var key = document.getElementById("textkey").value;
    storage.removeItem(key);
    key = "";
    viewStorage();
  }

  // sessionStorageからすべて削除
  function removeallStorage() {
    storage.clear();
    viewStorage();
  }

}
</script>
</head>

<body>
<div class="container">
  <div class="form-group row">
    <div class="col-sm-2">
      保存するKey:
    </div>
    <div class="col-sm-10">
      <input id="textkey" type="text" class="form-control">
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-2">
      保存する値:
    </div>
    <div class="col-sm-10">
      <input id="textdata" type="text" class="form-control">
    </div>
  </div>
  <div class="form-group">
    <button id="button" onclick="setsessionStorage()" class="btn btn-primary">保存</button>
    <button id="button" onclick="removeStorage()" class="btn btn-primary">削除</button>
    <button id="button" onclick="removeallStorage()" class="btn btn-primary">全て削除</button>
  </div>
  <div class="table-responsive">
    <table class="table table-bordered">
      <tr>
        <th>キー</th>
        <th>値</th>
      </tr>
      <tbody id="list">
      </tbody>
    </table>
  </div>
</div>
</body>

</html>

demo

localStorage

localStorage とはオリジン単位でデータを永続的に保存するストレージです。

オリジンとは「http://www.example.com:80」のように「プロトコル://ドメイン:ポート番号」のことです。sessionStorage と違ってオリジンが同じであれば、ウィンドウが別であってもデータを共有できます。また、ブラウザを終了してもデータが消失することはありません。

Cookie と似ていますが、サーバとの通信でデータが送られることはありません。

次のソースコードで、Web ブラウザの別タブや別ウィンドウ間でデータの追加、変更、削除を行うことができます。

local_storage.html

<!doctype html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/sanitize.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
#data {
  width: 100%;
  height: 100px;
}
</style>
</head>

<body>
<div class="container">
  <div class="form-group">
    <input type="text" name="data" id="data" placeholder="メッセージを入力" class="form-control">
  </div>
  <div class="form-group btn-group">
    <input type="button" onclick="onClear()" value="クリア"  class="btn btn-primary">
  </div>
</div>
<script>
var dataform = document.getElementById("data");
var data = localStorage.getItem("data_key");
if (data != null) {
  dataform.value = data;
}
// テキストエリアが更新されるたびにローカルストレージを更新する
dataform.addEventListener("keyup", function(event) {
  localStorage.setItem("data_key", dataform.value);
}, false);
// 別のタブやウィンドウでの更新を反映する
window.addEventListener("storage", function(event) {
  var value = localStorage.getItem("data_key");
  if (event.key == "data_key" && dataform.value != value) {
    dataform.value = value;
  }
}, false);
// ローカルストレージのデータを削除する
function onClear() {
  localStorage.setItem("data_key", "");
  dataform.value = "";
}
</script>
</body>

</html>

demo