JavaScript は localStorage を使用してデータを保存します

この記事では、javascript に関する関連知識を提供します。主に、JavaScript によるデータの保存に localStorage を使用する方法を紹介します。記事内のサンプル コードは、非常に詳細に紹介されており、一定の参考価値があります。誰にとっても役に立ちます。

[関連する推奨事項: JavaScript ビデオ チュートリアル 、Web フロントエンド ]

背景

以前は、js は Session と Cookie を使用して情報を保存していました。その時はまだ行き詰まっていました。同僚に何か新しい解決策はないかと尋ねたところ、ブラウザ側にデータを保存できる HTML5 localStorage ローカル ストレージがすでに存在していることを知りました。

最初期の Cookies は非常に小さいもの (約 4KB) しか保存できず、セキュリティが非常に貧弱だったことを覚えています。IE6 時代には、ドメイン名は20 個の Cookie を保持します。Cookie の制限は非常に大きいです。もちろん、IE には userData もありますが、これは役に立ちません。 Flash には Cookie の約 25 倍の容量を持つ比較的大規模な Storage も付属していますが、当時の Flash も現在は廃止されています。

H5時代には統一され、LocalStorageが世界を席巻します。公式推奨では、各 Web サイトは 5MB と非常に大きく、ブラウザの設定によって異なりますが、通常は JSON、文字列、またはキャッシュを保存するには十分です。

HTML5 LocalStorage ローカル ストレージ

• sessionStorage: 保存されたデータはブラウザのセッションに使用されます, セッションが終了すると (通常はウィンドウが閉じます)、データは消去されます;
  
• #localStorage: 保存されたデータは長期間存在します。このとき、Web ページは以前に保存したデータを直接読み取ることができます。保存期間の違いを除けば、2 つのオブジェクトのプロパティとメソッドはまったく同じです。
  

これらは Cookie メカニズムの拡張バージョンによく似ていますが、より大きなストレージ スペースを使用できます。ただし、Cookie と同様に、同じドメイン制限の対象となります。 Web ページに保存されたデータは、同じドメイン内の Web ページでのみ読み取ることができます。

window オブジェクトに sessionStorage 属性と localStorage 属性が含まれているかどうかを確認することで、ブラウザがこれら 2 つのオブジェクトをサポートしているかどうかを判断できます。

function checkStorageSupport()
{
 // sessionStorage
 if (window.sessionStorage) {
  return true;
 } else {
  return false;
 }
 
 // localStorage
 if (window.localStorage) {
  return true;
 } else {
  return false;
 }
}

ストレージ操作

sessionStorage と localStorage によって保存されたデータはすべて、「Key-Value キーと値のペア」 で表されます。 フォームが存在します。つまり、データの各項目にはキー名と対応する値があります。すべてのデータはテキスト形式で保存されます。

//sessionStorage 操作
sessionStorage.setItem("key","value");     // setItem方法，存储变量名为key，值为value的变量
var valueSession = sessionStorage.getItem("key");  // getItem方法，读取存储变量名为key的值
sessionStorage.removeItem('key');      // removeItem方法，删除变量名为key的存储变量
sessionStorage.clear();        // clear方法，清除所有保存数据
//localStorage 操作
localStorage.setItem("key","value");     // 存储变量名为key，值为value的变量
localStorage.key = "value"        // 同setItem方法，存储数据
var valueLocal = localStorage.getItem("key");   // 读取存储变量名为key的值
var valueLocal = localStorage.key;      // 同getItem，读取数据
localStorage.removeItem('key');      // removeItem方法，删除变量名为key的存储变量
localStorage.clear();         // clear方法，清除所有保存的数据

// 利用length属性和key方法，遍历所有的数据
for(var i = 0; i < localStorage.length; i++)
{
 console.log(localStorage.key(i));
}

// 存储 localStorage 数据为 Json 格式
value = JSON.stringify(jsonValue);      // 将 JSON 对象 jsonValue 转化成字符串
localStorage.setItem("key", value);     // 用 localStorage 保存转化好的的字符串

// 读取 localStorage 中 Json 格式数据
var value = localStorage.getItem("key");    // 取回 value 变量
jsonValue = JSON.parse(value);      // 把字符串转换成 JSON 对象

ストレージ イベント

保存されたデータが変更されると、ストレージ イベントがトリガーされます。このイベントにはコールバック関数を指定できます。

window.addEventListener("storage",onStorageChange);

コールバック関数はイベント オブジェクトをパラメータとして受け取ります。このイベント オブジェクトの key 属性には、変更されたキー名が保存されます。

function onStorageChange(e)
{
  console.log(e.key); 
}

key 属性に加えて、イベント オブジェクトには 3 つの属性があります。

• oldValue: 更新前の値。キーが新しく追加された場合、この属性は null になります。
• newValue: 更新された値。キーが削除された場合、このプロパティは null になります。
• url: ストレージ イベントを最初にトリガーした Web ページの URL。
  

特別な注意は、このイベントは、データ変更を引き起こす現在のページではトリガーされないことです。ブラウザーがドメイン名で複数のページを同時に開いた場合、ページの 1 つが sessionStorage または localStorage データを変更すると、他のすべてのページのストレージ イベントがトリガーされ、元のページによってストレージ イベントはトリガーされません。 。このメカニズムを通じて、複数のウィンドウ間の通信を実現できます。 IE を除くすべてのブラウザーでは、すべてのページでストレージ イベントがトリガーされます。

拡張知識

1. localStorage と sessionStorage は、HTML5 Web ストレージによって提供される 2 つのストレージ メソッドであり、IE7 以降およびほとんどのバージョンで利用できます。

2. localStorage と sessionStorage の違い:

(1) LocalStorage と sessionStorage は両方とも、クライアント上に一時情報を保存するために使用されるオブジェクトです。

(2). 文字列タイプのオブジェクトのみを保存できます (仕様では他のネイティブ タイプのオブジェクトも保存できますが、これを実装しているブラウザは今のところありません)。

(3). localStorage のライフサイクルは永続的であり、ユーザーがブラウザーによって提供される UI 上の localStorage 情報をクリアしない限り、この情報は永久に存在します。 (メモリに記録)

sessionStorage のライフ サイクルは現在のウィンドウまたはタブです。ウィンドウまたはタブが閉じられると、sessionStorage に保存されているすべてのデータがクリアされます (セッション ストレージ)

(4)、異なるブラウザーは情報を共有できませんlocalStorage または sessionStorage。同じブラウザ内の異なるページは同じ localStorage (ページは同じドメイン名とポートに属します) を共有できますが、sessionStorage 情報は異なるページまたはタブ間で共有できません。

ここで、ページとタブはトップレベル ウィンドウのみを参照することに注意してください。タブ ページに複数の iframe タグが含まれており、それらが同じソース ページに属している場合、それらの間で sessionStorage を共有できます。 (同一生成元の原則)

3. localStorage と sessionStorage で保存できるデータのサイズは、通常 5MB

[関連する推奨事項: javascript ビデオ チュートリアル 、ウェブフロントエンド]

以上がJavaScript は localStorage を使用してデータを保存しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。