BinaryDevelop
  1. ホーム
  2. ジャバスクリプト

HTML5 LocalStorage ローカルストレージとセッションストレージの使用法

2022-01-24 18:20:41

HTML5のLocalStorageとsessionStorageを使ったことがある人は、HTML5が非常に強力で、クッキーやセッションよりもずっと優れていることを実感していると思いますが、この知識を以下で学んでいきましょう...

一番最初のクッキーは当然誰でも知っているもので、問題は主に4KB程度と小さすぎることと、IE6では1ドメインあたり20個のクッキーしかサポートしておらず、少なすぎるということです。メリットは、誰もがサポートしていること、そして、かなりサポートされていることです。以前javascriptを無効にしたユーザーがもう存在しないように、ずっと前にクッキーを無効にしたユーザーは徐々に存在しなくなりつつあります。

まず当然のこととして、ブラウザがローカルストレージをサポートしているかどうかを確認します。HTML5では、ローカルストレージはlocalStorageとsessionStorageを含むウィンドウのプロパティであり、両者の違いはその名前から明らかでしょう。どちらも全く同じように使われますので、ここではlocalStorageの例を示します。

if(window.localStorage){ <未定義
 alert('このブラウザはlocalStorageをサポートしています');
}else{ <未定義
 alert('このブラウザはlocalStorageをサポートしていません');
}

データを保存する方法は、例えば window.localStorage.a や window.localStorage["a"] のように、プロパティに直接追加することです。これは、次のように、キーと値のペアの形式で簡単な読み取り、書き込み、および削除の操作を行います。

localStorage.a = 3;//a に "3" をセットします。
localStorage["a"] = "ssf";//a を "ssf" に設定、上記の値をオーバーライドする
localStorage.setItem("b","isaac");//b を "isaac" にセットします。
var a1 = localStorage["a"];//a の値を取得します。
var a2 = localStorage.a;//aの値を取得します。
var b = localStorage.getItem("b");//b の値を取得します。
localStorage.removeItem("c");//c の値を消去します。

ここで使うべきメソッドは、当然ながらgetItem()とsetItem()、そしてremoveItem()でKey-Valueペアをクリアするのが最もおすすめです。もし、すべてのKey-Valueペアを一度にクリアしたいのであれば、clear()を使用することができます。また、HTML5では以下のようにkey()メソッドが用意されており、どのようなキー値があるかわからない場合に利用することができます。

var storage = window.localStorage;
関数 showStorage(){ <未定義
 for(var i=0;i<storage.length;i++){ <未定義
  //key(i) は対応するキーを取得し、getItem() メソッドは対応する値を取得します。
  document.write(storage.key(i) + " : " + storage.getItem(storage.key(i)))です。+ "<br>")。
 }
}

なお、HTML5のローカルストレージは文字列しか格納できず、格納された形式は自動的に文字列に変換されるため、読み込む際には自分で型変換をする必要があります。そのため、先のコードでは parseInt を使用する必要があります。

また、iPhone/iPadでsetItem()を設定すると変なQUOTA_EXCEEDED_ERRエラーが出ることがあるので、通常はsetItemの前にremoveItem()を設定すればOKです。

HTML5のローカルストレージは、キーと値のペアの変更をリッスンするストレージイベントも提供しており、次のように使用します。

if(window.addEventListener){. <未定義
 window.addEventListener("storage",handle_storage,false);
}else if(window.attachEvent){. <未定義
 window.attachEvent("onstorage",handle_storage);
}
関数 handle_storage(e){ <未定義
 if(!e){e=window.event;}。
 //showStorage();
}

イベント変数eについては、StorageEventオブジェクトであり、以下のように、キーと値のペアの変化を見るのに適した、多くの便利なプロパティを提供します。

<テーブル

 物件名

 タイプ

 説明

 キー

 文字列

 追加、削除、または修正された名前付きキー

 古い値

 任意の

 以前の値（現在は上書きされています）、または新しい項目が追加された場合はnullです。

 新しい値

 任意の

 新しい値、または項目が追加された場合はNULL

 url/uri

 文字列

 この変更の引き金となったメソッドを呼び出したページ

ここでは、2つのキーと値の組a,bを追加し、ボタンを追加しています。aに固定値を設定し、ボタンがクリックされたら、b:の値を変更します。

<body>
<p>You have viewed this page <span id="count">0</span> time(s). </p>
<p><input type="button" value="changeStorage" onClick="changeS()"/></p>
<script>
var storage = window.localStorage;
if (!storage.getItem("pageLoadCount")) storage.setItem("pageLoadCount",0);
storage.pageLoadCount = parseInt(storage.getItem("pageLoadCount"))) + 1;// フォーマットする必要があります
document.getElementByIdx_x("count").innerHTML = storage.pageLoadCount;
showStorage() を実行します。
if(window.addEventListener){。 <未定義
 window.addEventListener("storage",handle_storage,false);
}else if(window.attachEvent){. <未定義
 window.attachEvent("onstorage",handle_storage);
}
関数 handle_storage(e){ <未定義
 if(!e){e=window.event;}。
 showObject(e)とします。
}
関数showObject(obj){。 <未定義
 //再帰的にオブジェクトを表示する
 if(!obj){return;}。
 for(var i in obj){ <未定義
  if(typeof(obj[i])! ="object" || obj[i]==null ){。 <未定義
   document.write(i + " : " + obj[i] + "<br/>");
  }else{ <未定義
   document.write(i + " : object" + "<br/>");
  }
 }
}
storage.setItem("a",5);
関数 changeS(){ <未定義
 //キーの値を変更し、ストレージイベントをテストします。
 if(!storage.getItem("b")){storage.setItem("b",0);} ｛storage.getItem("b")｝とする。
 storage.setItem('b',parseInt(storage.getItem('b'))+1);
}
function showStorage(){ <未定義
 //localStorageにあるキーと値のペアをループさせる
 for(var i=0;i<storage.length;i++){ <未定義
  //key(i) は対応するキーを取得し、getItem() メソッドは対応する値を取得します。
  document.write(storage.key(i) + " : " + storage.getItem(storage.key(i)))です。+ "<br>")。
 }
}
</script>
</body>

sessionStorageは、上記のlocalStorageと非常によく似ており、ほぼ同じような仕組みになっています。

非常にわかりやすいインターフェイスです。

  • sessionStorage.getItem(key)。指定したキーに対応するローカルに保存された値を取得する
  • sessionStorage.setItem(key,value): キーフィールドに値を格納する。
  • sessionStorage.removeItem(key): 指定されたキーに対してローカルに保存された値を削除します。
  • sessionStorage.lengthはsessionStorage内のアイテム数です。

sessionStorageとlocalStorageの類似点・相違点

sessionStorageはlocalStorageと異なり、セッションに固有のデータを保存します。つまり、ブラウザを閉じるまでしか残らず、ブラウザを閉じてページを再び開くと、それまでのストレージはクリアされています。一方、LocalStorageは、セッションに依存しない永続的なストレージです。

sessionStorageとlocalStorageが提供するkey()とlengthによって、以下のコードのように、保存されたデータを簡単に反復処理することができます。

<テーブル 
1
var
storage = window.localStorage;
2
for
(
var
i=0, len = storage.length; i < len; i++){
3
var
key = storage.key(i);
4
var
value = storage.getItem(key);
5
console.log(key + 
"="
+ value);
6
}
<テーブル 
2



for

(

var

i=0, len = storage.length; i < len; i++){
<テーブル 
3



var

key = storage.key(i);
<テーブル 
4



var

value = storage.getItem(key);
<テーブル 
5



console.log(key + 

"="

+ value);
<テーブル 
6



}

sessionStorageとlocalStorageのclear()関数は、localStorage.clear()のように、同じソースのlocalStorageのデータをすべて消去しますが、Session Storageについては、現在のセッションのデータのみを消去するために使用されます。

ページを閉じるとsessionStorageのデータはクリアされますが、一時的に保存する必要のあるデータが少量であれば、新しいページを更新したり開き直ったりしてもデータは残っています。私たちは、sessionStorageを使うことができます。あるいは、ページ間の小さなインタラクションを行う。

sessionStorageとlocalStorageは同じメソッドのストレージイベントを持ち、ストレージイベントハンドラでこのストレージアクションをキャンセルすることができません。storageイベントは、データの変更があったときに、ブラウザからあなたへの通知にすぎません。setItem()、removeItem()、clear()メソッドが呼ばれ、実際にデータが変更されたときに、storageイベントが発生します。ここでいう条件は、データが実際に変更されたことであることに注意してください。つまり、現在の記憶領域が空であれば、イベントを発生させずに再度 clear() を呼び出すことはできません。あるいは、setItem() で既存のものと同じ値を設定しても、イベントも発生しません。イベントが発生するのは、保存領域が変更されたときで、これには便利なプロパティが多数含まれています。

  • storageArea : ストレージの種類を示す (セッションまたはローカル)
  • キー :変更された項目のキー
  • 古い値 キーの元の値
  • 新値 キーの新しい値
  • url* : キーの変更が発生する URL

    * 注：以前の仕様では、url 属性は uri 属性でした。一部のブラウザは早くからリリースされており、この変更が含まれていません。互換性の理由から、url属性を使用する前に、その存在を確認し、url属性がない場合はuri属性を使用する必要があります
    clear()メソッドを呼び出すと、key, oldValue, newValueはすべてnullに設定されます。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します