JavaScript でのブラウザーのストレージとキャッシュの方法について学習します。

JavaScript におけるブラウザのストレージとキャッシュの方法を理解する
Web 開発では、ブラウザのストレージとキャッシュの機能は非常に重要です。これらにより、ユーザー エクスペリエンスが向上し、ネットワーク リクエストが削減され、ページの読み込み速度が向上します。この記事では、JavaScript での一般的なブラウザーのストレージとキャッシュの方法について説明し、具体的なコード例を示します。

1. Cookie
Cookie はブラウザがデータを保存するための方法です。これにより、Web サーバーは少量のデータをブラウザーに保存し、その後のリクエストでサーバーに送信できるようになります。以下は Cookie を設定および取得するためのサンプル コードです:

// Set Cookie
document.cookie = "username=John Doe;expires=Sat, 31 Dec 2022 00:00:00 UTC; path = /";

// Cookieを取得
function getCookie(name) {
var cookieArr = document.cookie.split("; ");
for(var i = 0; i

var cookiePair = cookieArr[i].split("=");
if(name === cookiePair[0]) {
  return decodeURIComponent(cookiePair[1]);
}

}
return null;
}

var username = getCookie("username");

二、LocalStorage
LocalStorage は、ブラウザが HTML5 にデータを保存するための新しい方法です。ブラウザーにデータを長期間保存できるため、ユーザーがブラウザーを閉じたりコンピューターを再起動したりしても、データはそのまま残ります。以下は LocalStorage を設定および取得するサンプル コードです:

// Set LocalStorage
localStorage.setItem("username", "John Doe");

// Get LocalStorage
var username = localStorage.getItem("username");

// LocalStorage を削除します
localStorage.removeItem("username");

3. SessionStorage
SessionStorage はLocalStorage に関連する方法はブラウザがデータを保存する方法に似ていますが、現在のセッションでのみ有効です。ユーザーがブラウザのタブまたはブラウザを閉じると、SessionStorage 内のデータはクリアされます。以下は、SessionStorage を設定および取得するためのサンプル コードです。

// Set SessionStorage
sessionStorage.setItem("username", "John Doe");

// Get SessionStorage
var username = sessionStorage.getItem("username");

//SessionStorageを削除します
sessionStorage.removeItem("username");

4. IndexedDB
IndexedDBはa 大量の構造化データをブラウザに保存できる高度なブラウザ データベース保存方法。 LocalStorage や SessionStorage とは異なり、IndexedDB を使用すると、開発者は複数のデータベースを作成し、複雑なデータ操作を実行できます。以下は、IndexedDB を使用するサンプル コードです:

// データベースを開きます
var request = window.indexedDB.open("myDatabase", 1);

request.onupgradeneeded = function ( イベント) {
var db =event.target.result;
var objectStore = db.createObjectStore("customers", { keyPath: "id" });
};

/ / データを追加します
request.onsuccess = function(event) {
var db =event.target.result;
vartransaction = db.transaction(["customers"], "readwrite");
var objectStore =transaction.objectStore("customers");
var customer = { id: 1, name: "John Doe" };
var request = objectStore.add(customer);

request.onsuccess = function(event) {

console.log("Data added successfully");

};
};

上記は、Cookie、LocalStorage、SessionStorage、IndexedDB などの一般的なブラウザのストレージおよびキャッシュ方法の一部です。 。ニーズと特定のシナリオに基づいてデータを保存および取得するための適切な方法を選択すると、ユーザー エクスペリエンスと Web ページのパフォーマンスを向上させることができます。ただし、これらの方法を使用する場合は、データのセキュリティとプライバシーの保護に注意する必要があることに注意してください。

以上がJavaScript でのブラウザーのストレージとキャッシュの方法について学習します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。