備忘録的プログラミングリファレンス

Storage インターフェイス

 Storage インターフェイスは、ストレージと呼ばれるデータの一時保存の機能にアクセスし、そのデータを操作する方法を定義したインターフェイスです。 データを操作する方法には、データの取得、保存、更新、削除、初期化があります。

 一時保存の機能には Cookie があります。Storage は Cookie よりも大きなデータを扱うことができ、機能が充実しています。

sessionStorageによるデータ保存の例
sessionStorage.setItem('name','ねこ');
詳しくはExampleを参照してください

 データは、データごとに key と value というデータの名称とその値をセットに保存します。このセットをデータアイテムといいます。

Storage 継承図
  • Web API
    • Storage

 Storage インターフェイスから生成されるオブジェクトには、 sessionStorage オブジェクトと localStorage オブジェクトがあります。

  sessionStorage は、window.sessionStorage または sessionStorage でアクセスします。
 localStorage には、window.localStorage または localStorage でアクセスします。

 sessionStorage はウィンドウやタブを閉じる、または一定時間を超えるとデータが消滅するといったサイトのセッション中のみ可能なデータの一時保存機能です。
 localStorage は永続的なデータの保存が可能です。セッションが途切れても次回サイトを開くと再びデータが使える一時保存機能です。

プロパティ(Property)

Property概要分類
.lengthデータのアイテム数を返す

メソッド(Methods)

Method摘要分類
.key() n 番目のキー名を返す
.getItem()キー名称からその値を返す
.setItem()ストレージにキーとその値を追加
.removeItem()ストレージからキー名に該当するデータアイテムを削除
.clear()ストレージからすべてのデータを削除

Example

  sessionStorage オブジェクトの使用例です。

 Storage の内容は開発用コンソールで確認できます。
Chrome では その他のツールデベロッパーツールApplication→ 項目 Storage→ 項目 sessionStorage で参照できます。
FireFox では その他のツールウェッブ開発ツール→項目ストレージ→ 項目 sessionStorage で参照できます。

確認ボタンをクリックしてください。以下のHTML,CSS,Scriptコード例が実行されます。