JavaScript_javascript 스킬에서 localStorage 사용의 핵심 포인트에 대한 자세한 설명

localStorage는 주로 쿠키를 대체하는 데 사용되며, 읽기 쓰기 어려움과 쿠키 용량 제한 문제를 해결합니다. (쿠키 사용 시 주의사항 참조)

localStorage에는 다음과 같은 기능이 있습니다

1.localStorage는 공통 개체이며 모든 개체에 대한 작업이 적용 가능합니다.

2. localStorage 객체의 속성 값은 문자열만 가능합니다.

여기에는 특별한 주의가 필요합니다. 객체를 localStorage에 저장하려고 한다고 가정해 보겠습니다.
등

var obj = {
"na=me": "chua",
age: 9
}
//拼接到localStorage
var str = "";
for(var i in obj){
str += encodeURIComponent(i) + "=" + encodeURIComponent(obj[i]) + ";"
}
str = str.substring(0,str.length - 1);
localStorage.testObj = str;
//解析出来
var strA = localStorage.testObj.split(";");
var newObj = {};
for(var i = 0; i < strA.length; i++){
var tmp = strA[i].split("=");
newObj[decodeURIComponent(tmp[0])] = decodeURIComponent(tmp[1]);
}

물론 JSON 클래스를 사용하여 개체를 문자열로 변환하고 저장한 다음 꺼낼 때 json 문자열을 실제로 사용 가능한 json 개체 형식으로 변환할 수도 있습니다.

3. localStorage에서 지원하는 기본 공간 크기는 5M이며, 이는 최신 브라우저에서도 잘 지원됩니다

xiaowei0705의 HTML5 LocalStorage 로컬 저장소 컷아웃 빌려오기

스크립트 하우스는 휴대폰에서 사용할 때 이를 지원하기 위해 백그라운드에서 메모리 공간을 열어야 한다는 점을 모두에게 상기시켜줍니다.

"QUOTA_EXCEEDED_ERR"은 예외입니다. 사용하는 저장 용량이 한도(5M)를 초과하는 경우 이 예외가 보고됩니다.

4.localStorage 자체에 메소드가 있습니다

키-값 쌍 추가: localStorage.setItem(key,value)

키 값 가져오기: localStorage.getItem(key)

키-값 쌍 삭제: localStorage.removeItem(key).

모든 키-값 쌍을 지웁니다: localStorage.clear().

localStorage의 속성 이름(키 이름)을 가져옵니다: localStorage.key(index).

일반 객체와 다른 속성 길이도 있습니다:

localStorage: localStorage.length에 저장된 키-값 쌍의 수를 가져옵니다.

다음 예는 localStorage의 키-값 쌍을 얻는 데 사용됩니다.

for(var i=0;i<localStorage.length;i++){
console.log(localStorage.key(i)+ " : " + localStorage.getItem(localStorage.key(i)));
} 

네이티브 메소드 신뢰 원칙에 따라 localStorage를 운영하려면 네이티브 메소드를 최대한 활용해야 합니다. 그러나 iPhone/iPad에서 setItem()을 호출할 때 이상한 QUOTA_EXCEEDED_ERR 오류가 발생하는 경우가 있습니다. 해결책은 setItem 이전에 item()을 제거하는 것입니다. 따라서 이 호환성 문제로 판단하면 객체를 사용하여 키-값 쌍을 추가/삭제하는 것이 더 편리하고 호환성이 더 좋은 것으로 보입니다.

5.localStorage 이벤트

localStorage의 저장 이벤트는 저장 이벤트 핸들러의 저장 작업을 취소할 수 없습니다.

스토리지 이벤트는 localStorage 데이터가 변경된 후 브라우저가 제공하는 알림일 뿐입니다. 여기서 조건은 데이터가 실제로 변경되었다는 것입니다. 즉, 현재 저장 영역이 비어 있는 경우, 다시clear()를 호출해도 이벤트가 발생하지 않습니다. 또는 setItem()을 사용하여 기존 값과 동일한 값을 설정하면 이벤트가 발생하지 않습니다. 저장 영역이 변경되면 트리거됩니다. 여기에는 유용한 속성이 많이 포함되어 있습니다.

•storageArea: 저장소 유형(세션 또는 로컬)을 나타냅니다.
•key : 변경된 항목의 키
•oldValue: 키의 원래 값
•newValue: 키의 새 값
•url*: 키 변경이 발생하는 URL

참고: url 속성은 초기 사양에서는 uri 속성이었습니다. 일부 브라우저는 이전에 출시되었으므로 이러한 변경 사항이 포함되지 않았습니다. 호환성을 위해 url 속성을 사용하기 전에 먼저 해당 속성이 존재하는지 확인해야 합니다. url 속성이 없으면 uri 속성을 사용해야 합니다

추신: Firefox 및 Chrome에서는 저장 및 읽기가 정상이지만 저장 이벤트 실행에 문제가 있는 것 같습니다. Chrome에서는 Firefox 자체 페이지가 창을 실행하지 않도록 수정하여 이 페이지의 저장 이벤트를 실행할 수 있습니다. Storage 이벤트를 수정한 후 A.html과 B.html에 동시에 액세스할 때 A 페이지에서 setItem을 수행하면 B 페이지 창의 저장 이벤트가 트리거될 수 있습니다. 마찬가지로 B 페이지에서 setItem을 수행하면 페이지 A 창의 저장 이벤트. IE9에서는 페이지 자체의 설정 값이 현재 페이지의 저장 이벤트를 트리거할 수 있으며, 현재 페이지의 설정 값은 동일한 페이지 아래에 있는 다른 페이지 창의 저장 이벤트도 트리거할 수 있습니다. "origin"이 더 합리적인 것 같습니다. 예를 들어 PrimeTechBlog를 권장합니다. WebStorage-localstorage
의 첫 번째 시도입니다.

따라서 호환되는 브라우저에 호환되는 처리 기능을 작성하거나 단순히 저장 이벤트를 사용하지 않는 것이 좋습니다.

예시

if (window.addEventListener) {
window.addEventListener("storage", handle_storage, false);
} else {
window.attachEvent("onstorage", handle_storage);
};
function handle_storage(e) {
if (!e) { e = window.event; }
//响应代码部分 ...
} 

몇 가지 소소한 사항:

LocalStorage가 작동하려면 도메인 이름을 통해 액세스해야 합니다

clear() 메소드를 호출하면 key, oldValue, newValue가 모두 null로 설정됩니다.

LocalStorage도 같은 방식으로 사용됩니다

•localStorage - 시간 제한 없는 데이터 저장
•sessionStorage - 세션용 데이터 저장

localStorage는 여러 가지 방법을 제공합니다.

1. 저장공간: localStorage.setItem(키, 값)

키가 있으면 값을 업데이트하세요

2. 가져오기: localStorage.getItem(키)

키가 존재하지 않으면 null을 반환합니다

3. 삭제: localStorage.removeItem(키)

삭제되면 키에 해당하는 모든 데이터가 삭제됩니다

4. 모두 지우기: localStorage.clear()

removeItem을 사용하여 하나씩 삭제하는 것이 너무 번거로울 때가 있습니다. localStorage 개체에 저장된 모든 데이터를 지우는 Clear를 사용할 수 있습니다.

5. localStorage에 저장된 키 탐색

.length 총 데이터 양입니다. 예: localStorage.length
.key(index)는 키를 가져옵니다. 예: var key=localStorage.key(index);

6. JSON 형식으로 데이터를 저장합니다

JSON.stringify(data) 객체를 JSON 형식의 데이터 문자열로 변환하고 변환된 문자열을 반환합니다
JSON.parse(data)는 데이터를 객체로 구문 분석하고 구문 분석된 객체를 반환합니다

참고: localStorage에 저장된 데이터는 브라우저 간에 공유할 수 없습니다. 하나의 브라우저는 자체 브라우저의 데이터만 읽을 수 있으며 저장 공간은 5M입니다.