sessionStorage の実行可能な代替手段-htmlチュートリアル-php.cn

sessionStorage の実行可能な代替手段

WBOY

リリース： 2024-01-13 12:03:19

オリジナル

629 人が閲覧しました

sessionStorage の実行可能な代替手段

sessionStorage の代替手段として考えられるものは何ですか?

sessionStorage は、ブラウザによって提供されるストレージメカニズムで、一時的なセッションデータを同じウィンドウまたはタブに保存できます。ただし、sessionStorage には、データがセッションに保存されること、ウィンドウまたはタブを閉じるとデータが消去されること、ウィンドウまたはタブ間でデータを共有できないことなど、いくつかの制限があります。したがって、より柔軟でグローバルなデータストレージソリューションが必要な場合は、他の代替手段を検討する必要があります。

localStorage の使用

localStorage は sessionStorage よりも強力で、異なるウィンドウまたはタブ間でデータを共有でき、データは期限切れになりません。 sessionStorage と同様に、localStorage もブラウザーによって提供される API であり、次のコード例で使用できます。

// データの保存
localStorage.setItem('key', 'value');

// データの取得
var value = localStorage.getItem('key');

// データの削除
localStorage.removeItem('key');

/ / すべてのデータをクリア
localStorage.clear();

cookie を使用する

localStorage に加えて、Cookie も一般的なデータストレージソリューションです。 Cookie には、各ドメイン名での Cookie の数の制限や Cookie のサイズの制限など、いくつかの制限がありますが、クロスドメインの特性があり、異なるドメイン名でデータを共有できます。

// データを保存し、cookie にデータを書き込みます
document.cookie = 'key=value;expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/';

// データの取得、Cookie からのデータの読み取り
function getCookie(name) {

var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
    var cookie = cookies[i].trim();
    if (cookie.substring(0, name.length + 1) === (name + '=')) {
        return decodeURIComponent(cookie.substring(name.length + 1));
    }
}
return '';

ログイン後にコピー

}

var value = getCookie('key');

// データを削除し、Cookie の有効期限を現在時刻より前に設定します
function deleteCookie(name) {

document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT; path=/';

ログイン後にコピー

}

deleteCookie('key');

IndexedDB の使用

#IndexedDB は、ブラウザーに提供される高度なデータベースであり、ブラウザーに大量の構造化データを保存できます。 localStorage や Cookie とは異なり、IndexedDB はより複雑なオブジェクトを保存でき、トランザクションやインデックスなどの機能をサポートします。以下は IndexedDB を使用したコード例です:

// データベースを開きます

var request = window.indexedDB.open('myDatabase', 1);

request.onupgradeneeded = function ( イベント) {

var db = event.target.result;
var objectStore = db.createObjectStore('myObjectStore', { keyPath: 'id' });

ログイン後にコピー

};

request.onsuccess = function(event) {

var db = event.target.result;
var transaction = db.transaction(['myObjectStore'], 'readwrite');
var objectStore = transaction.objectStore('myObjectStore');

// 存储数据
var request = objectStore.add({ id: 1, name: 'value' });

request.onsuccess = function(event) {
    console.log('Data stored successfully.');
};

// 获取数据
var getRequest = objectStore.get(1);

getRequest.onsuccess = function(event) {
    var value = getRequest.result.name;
};

// 删除数据
var deleteRequest = objectStore.delete(1);

deleteRequest.onsuccess = function(event) {
    console.log('Data deleted successfully.');
};

ログイン後にコピー

};

上記のネイティブストレージソリューションに加えて、データをより便利に保存できる次のようなサードパーティライブラリもあります。アプリケーションのステータスを管理するための JavaScript ライブラリは、グローバルストアを作成することでデータを保存できます。

RxJS: 非同期データストリームを処理するためのライブラリ。データを保存するグローバルな監視可能なオブジェクトを作成するために使用できます。