ブラウザにデータを保存するWeb Storage(Session​ Storage/Local Storage)とはなにか?

よこのじ(@yokonoji_work)です。

この記事では、Web Storage(Session​ Storage/Local Storage)についてご紹介します。

以前の記事「JavaScriptでcookie(クッキー)の保存・読み出し・削除をする方法」で、Cookieを使ってブラウザ側でデータを保持する方法を紹介しましたが、次のような不便なところがあります。

  • 指定期限までしかデータを保存できない
  • データサイズの上限が4KB
  • HTTPリクエストのたびにサーバーにデータ送信

Web Storage(Session​ Storage/Local Storage)であれば、不便な点を解消できますので、使い方を見ていきましょう。

Web Storage(Session​ Storage/Local Storage)とは?

Web Storage API はブラウザにデータを保存するための仕組みです。JavaScriptで保存、更新、削除、取得といった操作を行えます。

保存する方法には、sessionStorage と localStorage があります。

  • sessionStorage は、ページのセッション中 (ページの再読み込みや復元を含む、ブラウザを開いている間) に使用可能な、生成元ごとに区切られた保存領域を管理します。
  • localStorage も同様ですが、こちらはブラウザを閉じたり再び開いたりしても持続します。

Web Storage の概念と使用方法

sessionStorage と localStorage は、どちらもデータ上限が1オリジン5MBです。また、必要なときのみサーバーにデータ送信しますので、Cookieよりセキュリティ面で有利です。

1オリジンとは、1つのURLだと考えるとわかりやすいです。
次のようにURLのスキーマ、ドメイン、ポート番号が異なれば別のオリジンとなります。

  • http://example.com
  • https://example.com
  • http://www.example.com
  • http://sub.example.com
  • http://example.com:8080

sessionStorage はセッション内でのデータ保持なので、ウィンドウやタブを閉じるとデータは廃棄されます。

対して、localStorage のデータ保持は永続的です。5MBという容量を活かして、オフラインでも利用可能なアプリケーションに応用できます。

Web Storageはほとんどのブラウザに対応しているため、使用するのに問題はなさそうです。

web storage

Amazonでは、「最近閲覧した商品」の情報をlocalStorageで保持しているそうですよ。その他、サイトに初回アクセス時にのみメッセージを表示するためのフラグや、お気に入りボタンon/offの情報を持たせたりする用途も考えられますね。

Web Storage(Session​ Storage/Local Storage)の使い方

Web Storage(Session​ Storage/Local Storage)の使い方はとても簡単です。

Session​ Storage は次のように記述します。

 // データを追加
sessionStorage.setItem('name', 'yokonoji');
// データを取得
var name = sessionStorage.getItem("name");
// データを削除
sessionStorage.removeItem("name");

Local Storage も書き方は同じです。先頭のオブジェクト名をlocalStorageにするだけです。

  // データを追加
  localStorage.setItem('name', 'yokonoji');
  // データを取得
  var name = localStorage.getItem("name");
  // データを削除
  localStorage.removeItem("name");

Chromeだとデベロッパーツール => Application => Storage にて保存されていることが確認できます。key, valueの形式で保存されていますね。

localStorage

1MB = 1924KB = 1048576B なので、5MBあれば全角文字(2バイト)が524,288文字保存できます。

3744ツイート分と考えると、アイデア次第でかなりのことができそうですね。