JavaScript는 localStorage를 사용하여 데이터를 저장합니다.

이 글은 JavaScript가 localStorage를 사용하여 데이터를 저장하는 방법을 주로 소개하는 javascript에 대한 관련 지식을 제공합니다. 글의 샘플 코드가 매우 자세하게 소개되어 있으며 모든 사람에게 도움이 되기를 바랍니다.

[관련 추천: javascript video tutorial, web front-end]

Background

과거에는 js에서 Session 및 Cookie를 사용했습니다. 정보를 저장하려면, 마치 아직도 머무르고 있는 것처럼. 그 때 동료들에게 새로운 솔루션이 있는지 물었을 때, 브라우저 측에 데이터를 저장할 수 있는 HTML5 localStorage 로컬 저장소가 있다는 것을 알게 되었습니다.

초기의 쿠키는 아주 작은 것, 약 4KB만 저장할 수 있었고 보안이 매우 열악했던 것으로 기억합니다. IE6 시대에는 하나의 도메인 이름에 쿠키가 20개만 포함될 수 있었습니다. , IE도 userData 항목은 쓸모가 없습니다. Flash에는 Storage도 함께 제공되는데, 이는 상대적으로 크고 쿠키보다 약 25배 많은 공간을 가지고 있습니다. 당시 Flash도 현재 폐기되었습니다.

H5 시대에는 통일되고, LocalStorage가 세계를 지배합니다. 공식적인 권장 사항은 각 웹 사이트가 5MB 여야 한다는 것입니다. 이는 매우 큰 크기입니다. 브라우저 설정은 다양하지만 일반적으로 일부 JSON이나 문자열 또는 캐시를 저장하는 데 충분합니다.

HTML5 LocalStorage 로컬 저장소

• sessionStorage: 세션이 종료되면(보통 창이 닫히면) 데이터가 지워집니다.
  localStorage:
• 저장된 데이터는 오랫동안 존재합니다. 다음에 웹사이트를 방문하면 웹페이지에서 이전에 저장된 데이터를 직접 읽을 수 있습니다. 저장 기간이 다른 점을 제외하면 두 개체의 속성과 방법은 완전히 동일합니다. 훨씬 더 큰 저장 공간을 사용할 수 있지만 쿠키 메커니즘의 향상된 버전과 매우 유사합니다. 그러나 쿠키와 마찬가지로 동일한 도메인 제한이 적용됩니다. 웹페이지에 저장된 데이터는 동일한 도메인의 웹페이지에서만 읽을 수 있습니다.
  
window 객체에 sessionStorage 및 localStorage 속성이 포함되어 있는지 확인하면 브라우저가 이 두 객체를 지원하는지 확인할 수 있습니다.

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

Storage 작업

sessionStorage 및 localStorage에 의해 저장된 데이터는 모두 "키-값 키-값 쌍"

형식으로 존재합니다. 즉, 각 데이터 항목에는 키 이름과 해당 값이 있습니다. 모든 데이터는 텍스트 형식으로 저장됩니다.

//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 속성 외에도 이벤트 개체에는 세 가지 속성이 있습니다.

oldValue: 업데이트 전 값. 키가 새로 추가된 경우 이 속성은 null입니다.

newValue: 업데이트된 값. 키가 삭제된 경우 이 속성은 null입니다.

• url: 원래 저장 이벤트를 실행한 웹페이지의 URL입니다.
• 특별히 주의할 점은 이 이벤트가 현재 페이지에서 실행되어 데이터가 변경되지 않는다는 것입니다. 브라우저가 도메인 이름으로 동시에 여러 페이지를 열면 페이지 중 하나가 sessionStorage 또는 localStorage의 데이터를 변경하면 다른 모든 페이지의 저장 이벤트가 트리거되고 저장 이벤트는 원본에 의해 트리거되지 않습니다. 페이지. 이 메커니즘을 통해 여러 창 간의 통신이 가능해집니다. IE를 제외한 모든 브라우저 중에서 모든 페이지에서 저장 이벤트를 트리거합니다.
  

지식 확장

1. localStorage와 sessionStorage는 HTML5 웹 저장소에서 제공하는 두 가지 저장 방법이며 대부분의 브라우저에서 지원됩니다2 localStorage와 sessionStorage의 차이점은 다음과 같습니다. ), localStorage 및 sessionStorage는 모두 클라이언트에 임시 정보를 저장하는 데 사용되는 개체입니다.

(2) 문자열 유형의 객체만 저장할 수 있습니다(다른 기본 유형의 객체도 사양에 저장할 수 있지만 지금까지 이를 구현한 브라우저는 없습니다).

(3) localStorage 수명 주기는 영구적입니다. 즉, 사용자가 브라우저에서 제공하는 UI에서 localStorage 정보를 지우지 않는 한 이 정보는 영원히 존재합니다. (메모리에 기록됨)

　sessionStorage의 수명주기는 현재 창이나 탭이 닫히면 sessionStorage를 통해 저장된 모든 데이터가 지워집니다(세션 저장소).

(4) 서로 다른 브라우저는 localStorage 또는 sessionStorage의 정보를 공유할 수 없습니다. 동일한 브라우저의 서로 다른 페이지는 동일한 localStorage(페이지가 동일한 도메인 이름 및 포트에 속함)를 공유할 수 있지만, sessionStorage 정보는 서로 다른 페이지나 탭 간에 공유될 수 없습니다.

여기서 페이지와 탭은 최상위 창만 참조한다는 점에 유의해야 합니다. 탭에 여러 iframe 태그가 포함되어 있고 동일한 소스 페이지에 속하는 경우 sessionStorage는 이들 간에 공유될 수 있습니다. (동일한 출처원칙)

3 localStorage와 sessionStorage가 저장할 수 있는 데이터의 크기는 일반적으로 5MB

[관련 권장사항: javascript video tutorial, web front-end]

위 내용은 JavaScript는 localStorage를 사용하여 데이터를 저장합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!