HTML5 LocalStorage의 객체를 저장하는 방법은 무엇입니까?
질문
HTML5 LocalStorage에 JavaScript 객체를 저장하고 싶지만 내 객체가 분명히 문자열로 변환됩니다.
LocalStorage를 사용하여 원시적 인 JavaScript 유형 및 배열을 저장하고 검색 할 수 있지만 객체는 작동하지 않습니다.그들은해야합니까?
다음은 내 코드가 있습니다.
var testObject = { 'one': 1, 'two': 2, 'three': 3 };
console.log('typeof testObject: ' + typeof testObject);
console.log('testObject properties:');
for (var prop in testObject) {
console.log(' ' + prop + ': ' + testObject[prop]);
}
// Put the object into storage
localStorage.setItem('testObject', testObject);
// Retrieve the object from storage
var retrievedObject = localStorage.getItem('testObject');
console.log('typeof retrievedObject: ' + typeof retrievedObject);
console.log('Value of retrievedObject: ' + retrievedObject);
콘솔 출력은입니다
typeof testObject: object
testObject properties:
one: 1
two: 2
three: 3
typeof retrievedObject: string
Value of retrievedObject: [object Object]
SetItem 메서드가 저장하기 전에 SetItem 메서드가 문자열로 변환하는 것처럼 보입니다.
나는 Safari, Chrome 및 Firefox 에서이 동작을 보았습니다. 그래서 브라우저 별 버그 나 제한이 아닌 HTML5 웹 스토리지 사양의 오해가 있습니다.
http://www.w3.org/tr/html5/infrastructure.html에 설명 된 구조화 된 복제 알고리즘을 이해하려고 노력했습니다.나는 그것이 무엇인지를 완전히 이해하지 못합니다. 그러나 내 문제가 열거 할 수없는 내 객체의 속성과 관련이있을 것입니다 (???)
쉬운 해결 방법이 있습니까?
업데이트 : W3C는 결국 구조화 된 복제 된 사양에 대한 마음을 변경하고 구현과 일치하도록 사양을 변경하기로 결정했습니다.https://www.w3.org/bugs/public/show_bug.cgi?id=12111을 참조하십시오.따라서이 질문은 더 이상 100 % 유효하지 않지만 답변은 여전히 관심이있을 수 있습니다.
답변
Apple, Mozilla 및 Mozilla를 다시보고 문서화하면 문자열 키 / 값 쌍만 다루기 위해 기능이 제한되어있는 것으로 보입니다.
해결 방법은 저장하기 전에 개체를 문자열화 할 수 있으며 나중에 검색 할 때 나중에 구문 분석 할 수 있습니다.
var testObject = { 'one': 1, 'two': 2, 'three': 3 };
// Put the object into storage
localStorage.setItem('testObject', JSON.stringify(testObject));
// Retrieve the object from storage
var retrievedObject = localStorage.getItem('testObject');
console.log('retrievedObject: ', JSON.parse(retrievedObject));
답변
변종에 대한 사소한 개선 :
Storage.prototype.setObject = function(key, value) {
this.setItem(key, JSON.stringify(value));
}
Storage.prototype.getObject = function(key) {
var value = this.getItem(key);
return value && JSON.parse(value);
}
단락 된 평가 때문에 getObject ()는 키가 저장되지 않은 경우 즉시 null을 반환합니다.값이 ""(빈 문자열, json.parse ()가 해결할 수없는 경우 SyntaxError 예외를 throw하지 않습니다.
답변
이 편리한 방법으로 스토리지 객체를 확장하는 것이 유용 할 수 있습니다.
Storage.prototype.setObject = function(key, value) {
this.setItem(key, JSON.stringify(value));
}
Storage.prototype.getObject = function(key) {
return JSON.parse(this.getItem(key));
}
이 방법으로 API 밑에서만 문자열 만 지원하더라도 실제로 원하는 기능을 얻을 수 있습니다.
답변
스토리지 객체에 대한 외관을 만드는 것은 멋진 해결책이며, 이렇게하면 자신의 GET 및 SET 메소드를 구현할 수 있습니다.My API의 경우 LocalStorage에 대한 외관을 만들었고 설정 및 얻는 동안 객체인지 여부를 확인했습니다.
var data = {
set: function(key, value) {
if (!key || !value) {return;}
if (typeof value === "object") {
value = JSON.stringify(value);
}
localStorage.setItem(key, value);
},
get: function(key) {
var value = localStorage.getItem(key);
if (!value) {return;}
// assume it is an object that has been stringified
if (value[0] === "{") {
value = JSON.parse(value);
}
return value;
}
}
답변
stringify는 모든 문제를 해결하지 못합니다
여기에있는 답변은 JavaScript에서 가능한 모든 유형을 다루지 않으므로 여기에서 올바르게 처리하는 방법에 대한 몇 가지 짧은 예입니다.
//Objects and Arrays:
var obj = {key: "value"};
localStorage.object = JSON.stringify(obj); //Will ignore private members
obj = JSON.parse(localStorage.object);
//Boolean:
var bool = false;
localStorage.bool = bool;
bool = (localStorage.bool === "true");
//Numbers:
var num = 42;
localStorage.num = num;
num = +localStorage.num; //short for "num = parseFloat(localStorage.num);"
//Dates:
var date = Date.now();
localStorage.date = date;
date = new Date(parseInt(localStorage.date));
//Regular expressions:
var regex = /^No\.[\d]*$/i; //usage example: "No.42".match(regex);
localStorage.regex = regex;
var components = localStorage.regex.match("^/(.*)/([a-z]*)$");
regex = new RegExp(components[1], components[2]);
//Functions (not recommended):
function func(){}
localStorage.func = func;
eval( localStorage.func ); //recreates the function with the name "func"
eval ()이 악의이기 때문에 기능을 저장하는 것이 좋습니다. 보안, 최적화 및 디버깅에 관한 문제가 발생할 수 있습니다. 일반적으로 eval ()은 JavaScript 코드에서 결코 사용되지 않아야합니다.
사적인 회원
개체를 저장하기위한 json.stringify ()를 사용하는 문제는이 함수가 개인 구성원을 직렬화 할 수 없습니다. 이 문제는 .ToString () 메서드를 덮어 쓰면 해결할 수 있습니다 (웹 저장소에 데이터를 저장할 때 암시 적으로 호출됨).
//Object with private and public members:
function MyClass(privateContent, publicContent){
var privateMember = privateContent || "defaultPrivateValue";
this.publicMember = publicContent || "defaultPublicValue";
this.toString = function(){
return '{"private": "' + privateMember + '", "public": "' + this.publicMember + '"}';
};
}
MyClass.fromString = function(serialisedString){
var properties = JSON.parse(serialisedString || "{}");
return new MyClass( properties.private, properties.public );
};
//Storing:
var obj = new MyClass("invisible", "visible");
localStorage.object = obj;
//Loading:
obj = MyClass.fromString(localStorage.object);
원형 참조
또 다른 문제는 순환 참조를 처리 할 수 없습니다.
var obj = {};
obj["circular"] = obj;
localStorage.object = JSON.stringify(obj); //Fails
이 예에서 json.stringify ()는 TypeError "원형 구조를 JSON으로 변환"합니다. 원형 참조를 저장 해야하는 경우 JSON.Stringify ()의 두 번째 매개 변수가 사용될 수 있습니다.
var obj = {id: 1, sub: {}};
obj.sub["circular"] = obj;
localStorage.object = JSON.stringify( obj, function( key, value) {
if( key == 'circular') {
return "$ref"+value.id+"$";
} else {
return value;
}
});
그러나 원형 참조를 저장하기위한 효율적인 솔루션을 찾는 것은 해결해야 할 작업에 크게 의존하고 그러한 데이터를 복원하는 것은 사소한 것이 아닙니다.
이 문제를 다루는 데있어 이미 몇 가지 질문이 있습니다. stringify (JSON로 변환) 원형 참조가있는 JavaScript 객체
답변
많은 솔루션을 포장하는 훌륭한 도서관이 있으므로 JStorage라는 구형 브라우저를 지원합니다.
객체를 설정할 수 있습니다
$.jStorage.set(key, value)
쉽게 그것을 검색하십시오
value = $.jStorage.get(key)
value = $.jStorage.get(key, "default value")
최근댓글