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")
출처:https://stackoverflow.com/questions/2010892/how-to-store-objects-in-html5-localstorage