sessionStorage에 대한 실행 가능한 대안-HTML 튜토리얼-php.cn

sessionStorage에 대한 실행 가능한 대안

WBOY

풀어 주다： 2024-01-13 12:03:19

원래의

668명이 탐색했습니다.

sessionStorage에 대한 실행 가능한 대안

sessionStorage를 대체할 수 있는 솔루션은 무엇입니까?

sessionStorage는 동일한 창이나 탭에 임시 세션 데이터를 저장할 수 있는 브라우저에서 제공하는 저장 메커니즘입니다. 그러나 sessionStorage에는 몇 가지 제한 사항이 있습니다. 예를 들어 데이터는 세션에 저장되고, 창이나 탭을 닫으면 데이터가 지워지며, 창이나 탭 간에 데이터를 공유할 수 없습니다. 따라서 보다 유연하고 글로벌한 데이터 스토리지 솔루션이 필요하다면 다른 대안을 고려해야 합니다.

localStorage 사용

localStorage는 sessionStorage보다 강력하며, 여러 창이나 탭 간에 데이터를 공유할 수 있으며 데이터는 만료되지 않습니다. sessionStorage와 마찬가지로 localStorage도 브라우저에서 제공하는 API이며 다음 코드 예제를 통해 사용할 수 있습니다.

// 데이터 저장
localStorage.setItem('key', 'value')

// 데이터 가져오기
var value = localStorage.getItem('key');

//데이터 삭제
localStorage.removeItem('key');

// 모든 데이터 지우기
localStorage.clear();

쿠키 사용

localStorage를 제외하고 쿠키는 일반적인 데이터 저장 솔루션이기도 합니다. 쿠키에는 각 도메인 이름 아래의 쿠키 수 제한, 쿠키 크기 제한 등 몇 가지 제한 사항이 있지만 도메인 간 특성이 있으며 다른 도메인 이름 아래에서 데이터를 공유할 수 있습니다.

// 데이터 저장 및 쿠키에 데이터 쓰기
document.cookie = 'key=value; 만료=2023년 12월 18일 목요일 12:00:00 UTC; path=/';

// 쿠키에서 데이터 가져오기 데이터 읽기 in
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');

// 데이터를 삭제하고 쿠키 만료 시간을 현재 시간 이전으로 설정
function deleteCookie(name) {

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

로그인 후 복사

}

deleteCookie('key');

IndexedDB 사용

IndexedDB는 브라우저에서 대량의 구조화된 데이터를 저장할 수 있는 고급 데이터베이스입니다. localStorage 및 쿠키와 달리 IndexedDB는 더 복잡한 개체를 저장할 수 있으며 트랜잭션 및 인덱스와 같은 기능을 지원합니다. 다음은 IndexedDB를 사용한 코드 예시입니다.

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

request.onupgradeneeded = function(event) {

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.');
};

로그인 후 복사

};