[javascript] HTML5 localStorage에 객체 저장

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);

순환 참조

stringify처리 할 수없는 또 다른 문제 는 순환 참조입니다.

var obj = {};
obj["circular"] = obj;
localStorage.object = JSON.stringify(obj);  //Fails

이 예제에서는 “Converting circle structure to JSON”을JSON.stringify() 던집니다 . 순환 참조 저장이 지원되어야하는 경우, 두 번째 매개 변수 가 사용될 수 있습니다.TypeError 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;
    }
});

그러나 순환 참조를 저장하기위한 효율적인 솔루션을 찾는 것은 해결해야 할 작업에 따라 크게 달라 지므로 이러한 데이터를 복원하는 것도 쉽지 않습니다.

이 문제를 해결 하기 위해 SO에 대한 몇 가지 질문이 이미 있습니다. 순환 참조가있는 JavaScript 객체를 Stringify (JSON으로 변환)

답변

$.jStorage.set(key, value)

value = $.jStorage.get(key)
value = $.jStorage.get(key, "default value")

function store (a)
{
  var c = {f: {}, d: {}};
  for (var k in a)
  {
    if (a.hasOwnProperty(k) && typeof a[k] === 'function')
    {
      c.f[k] = encodeURIComponent(a[k]);
    }
  }

  c.d = a;
  var data = JSON.stringify(c);
  window.localStorage.setItem('CODE', data);
}

function restore ()
{
  var data = window.localStorage.getItem('CODE');
  data = JSON.parse(data);
  var b = data.d;

  for (var k in data.f)
  {
    if (data.f.hasOwnProperty(k))
    {
      b[k] = eval("(" + decodeURIComponent(data.f[k]) + ")");
    }
  }

  return b;
}