JavaScript의 브라우저 저장 및 캐싱 방법에 대해 알아보세요.

JavaScript의 브라우저 저장 및 캐싱 방법 이해
웹 개발에서는 브라우저 저장 및 캐싱 기능이 매우 중요합니다. 사용자 경험을 향상시키고, 네트워크 요청을 줄이며, 페이지 로드 속도를 높입니다. 이 기사에서는 JavaScript의 일반적인 브라우저 저장 및 캐싱 방법에 대해 설명하고 구체적인 코드 예제를 제공합니다.

1. 쿠키
쿠키는 브라우저가 데이터를 저장하는 방법입니다. 이를 통해 웹 서버는 브라우저에 소량의 데이터를 저장한 다음 후속 요청 시 이를 서버로 보낼 수 있습니다. 다음은 쿠키를 설정하고 가져오는 샘플 코드입니다.

// 쿠키 설정
document.cookie = "username=John Doe; 만료=Sat, 31 Dec 2022 00:00:00 UTC; path=/";

// 쿠키 가져오기
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");

2. LocalStorage
LocalStorage는 브라우저가 HTML5에 데이터를 저장하는 새로운 방법입니다. 사용자가 브라우저를 닫거나 컴퓨터를 다시 시작하더라도 데이터는 오랫동안 브라우저에 저장될 수 있습니다. 다음은 LocalStorage를 설정하고 가져오기 위한 샘플 코드입니다.

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

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

//Delete LocalStorage
localStorage.removeItem("username");

3. SessionStorage
SessionStorage는 브라우저가 LocalStorage와 유사한 데이터를 저장하는 방법이지만 현재 세션에서만 유효합니다. 사용자가 브라우저 탭이나 브라우저를 닫으면 SessionStorage의 데이터가 지워집니다. 다음은 SessionStorage를 설정하고 가져오기 위한 샘플 코드입니다.

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

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

//Delete SessionStorage
sessionStorage.removeItem("username");

4. IndexedDB
IndexedDB는 대량의 구조화된 데이터를 브라우저에 저장할 수 있는 고급 브라우저 데이터베이스 저장 방법입니다. LocalStorage 및 SessionStorage와 달리 IndexedDB를 사용하면 개발자가 여러 데이터베이스를 만들고 복잡한 데이터 작업을 수행할 수 있습니다. 다음은 IndexedDB를 사용한 샘플 코드입니다.

//데이터베이스 열기
var request = window.indexedDB.open("myDatabase", 1);

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

// 데이터 추가
request.onsuccess = function(event) {
var db = event. target .result;
var transaction = 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. 요구 사항과 특정 시나리오에 따라 데이터를 저장하고 얻는 적절한 방법을 선택하면 사용자 경험과 웹 페이지 성능을 향상시킬 수 있습니다. 그러나 이러한 방법을 사용할 때는 데이터 보안 및 개인정보 보호에 주의를 기울여야 한다는 점에 유의해야 합니다.

위 내용은 JavaScript의 브라우저 저장 및 캐싱 방법에 대해 알아보세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!