HTML5本地存储里储存对象

HTML5本地存储里储存对象

W3schools

在HTML5里，网页可以把数据存储到用户得本地浏览器里。
以前，这些数据保存在cookies里。但是Web存储更安全和快速。
这些数据不必包含在每次服务器请求中，仅需要时使用。
它可以用来存储比较大得数据，而不会影响网站得性能。
数据存储依靠name/value得形式，一个网页只能访问它自己存储得数据。
不像cookies那样，这种存储得容量很大（最小5MB）并且信息永远不会传递到服务器。


那么，你能在本地存储里存些什么呢？一个马戏团（一语双关）
你能存储字符串，数字，对象，复杂对象数组等。让我们看看从你得浏览器存储和获得数据得语法。


PS：不要存储敏感数据，比如密码，SSN，账户号等。


首先，让我们检查是否支持本地存储。


你能从这里查看本地存储得支持情况（caniuse.com/#search=localstorage）。
代码

if(typeof(Storage)!=="undefined")
  {
  // Code for localStorage/sessionStorage.
  }
else
  {
  // Sorry! No Web Storage support..
  }

获取和设置方法


字符串

var hello = "Hello World!!";
localStorage.setItem("hello",hello);
// get string
console.log(localStorage.getItem("hello")); // will return 'Hello World!!'

数字

var age = 99;
localStorage.setItem("myAge",age);
// get string
console.log(localStorage.getItem("age")); // will return 99 as string
// parsing to int
var age = parseInt(localStorage.getItem("age")); // 99
//or
var age = parseFloat(localStorage.getItem("age")); // 99

对象

var me = {name:'myname',age:99,gender:'myGender'};
localStorage.setItem("user",me);
//fetch object
console.log(localStorage.getItem("user")); // will return "[object Object]"

上面的方法存储对象并不能真得返回对象，这是因为当你求me对象值时，它返回一个字符串“[object Object]”。最终会保存到本地存储。下面时解决方案

var me = {name:'myname',age:99,gender:'myGender'};
localStorage.setItem("user",JSON.stringify(me));
//fetch object
console.log(localStorage.getItem("user")); // will return {"name":"myname","age":99,"gender":"myGender"}

很棒吧？但是JSON并不是支持所有浏览器，你可以通过这里检查（caniuse.com/#search=JSON）。
如果你已经使用JQuery，你也可以使用JQuery德parseJSON方法。
或者你也可以使用和JQuery一样得逻辑来解析JSON。引用自jquery-1.11.0.js(code.jquery.com/jquery-1.11.0.js)

jQuery.parseJSON = function( data ) {
    // Attempt to parse using the native JSON parser first
    if ( window.JSON && window.JSON.parse ) {
        // Support: Android 2.3
        // Workaround failure to string-cast null input
        return window.JSON.parse( data + "" );
    }
 
    var requireNonComma,
        depth = null,
        str = jQuery.trim( data + "" );
 
    // Guard against invalid (and possibly dangerous) input by ensuring that nothing remains
    // after removing valid tokens
    return str && !jQuery.trim( str.replace( rvalidtokens, function( token, comma, open, close ) {
 
        // Force termination if we see a misplaced comma
        if ( requireNonComma && comma ) {
            depth = 0;
        }
 
        // Perform no more replacements after returning to outermost depth
        if ( depth === 0 ) {
            return token;
        }
 
        // Commas must not follow "[", "{", or ","
        requireNonComma = open || comma;
 
        // Determine new depth
        // array/object open ("[" or "{"): depth += true - false (increment)
        // array/object close ("]" or "}"): depth += false - true (decrement)
        // other cases ("," or primitive): depth += true - true (numeric cast)
        depth += !close - !open;
 
        // Remove this token
        return "";
    }) ) ?
        ( Function( "return " + str ) )() :
        jQuery.error( "Invalid JSON: " + data );
};

下面的代码来自SO（stackoverflow.com/）给出得解决方案还有JSON parse()和Stringify()得代码。你可以复制张贴下面得代码到你得js文件。检查windows.JSON是否存在，如果不，会加载它。

if(!(window.JSON && window.JSON.parse))
{
    (function() {
  function g(a){var b=typeof a;if("object"==b)if(a){if(a instanceof Array)return"array";if(a instanceof Object)return b;var c=Object.prototype.toString.call(a);if("[object Window]"==c)return"object";if("[object Array]"==c||"number"==typeof a.length&&"undefined"!=typeof a.splice&&"undefined"!=typeof a.propertyIsEnumerable&&!a.propertyIsEnumerable("splice"))return"array";if("[object Function]"==c||"undefined"!=typeof a.call&&"undefined"!=typeof a.propertyIsEnumerable&&!a.propertyIsEnumerable("call"))return"function"}else return"null";
  else if("function"==b&&"undefined"==typeof a.call)return"object";return b};function h(a){a=""+a;if(/^\s*$/.test(a)?0:/^[\],:{}\s\u2028\u2029]*$/.test(a.replace(/\\["\\\/bfnrtu]/g,"@").replace(/"[^"\\\n\r\u2028\u2029\x00-\x08\x10-\x1f\x80-\x9f]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,"]").replace(/(?:^|:|,)(?:[\s\u2028\u2029]*\[)+/g,"")))try{return eval("("+a+")")}catch(b){}throw Error("Invalid JSON string: "+a);}function i(a,b){var c=[];j(new k(b),a,c);return c.join("")}function k(a){this.a=a}
  function j(a,b,c){switch(typeof b){case "string":l(b,c);break;case "number":c.push(isFinite(b)&&!isNaN(b)?b:"null");break;case "boolean":c.push(b);break;case "undefined":c.push("null");break;case "object":if(null==b){c.push("null");break}if("array"==g(b)){var f=b.length;c.push("[");for(var d="",e=0;eb?d+="000":256>b?d+="00":4096>b&&(d+="0");return m[a]=d+b.toString(16)}),'"')};window.JSON||(window.JSON={});"function"!==typeof window.JSON.stringify&&(window.JSON.stringify=i);"function"!==typeof window.JSON.parse&&(window.JSON.parse=h);
})();
}

然后你可以使用JSON.parse(object);   JSON.stringfy(string);了


现在我们怎么存储复合对象？

var address = {flat : 'a1' , building : 'some Inn'}
var me = {name:'myname',age:99,gender:'myGender',address : address};
 
localStorage.setItem("user",JSON.stringify(me));
//fetch object
console.log(localStorage.getItem("user")); // will return {"name":"myname","age":99,"gender":"myGender","address":{"flat":"a1","building":"some Inn"}}
 
var me  = JSON.parse(localStorage.getItem("user")); // a javascript object

（最后一句不知道怎么翻译了，两个版本）
简单吧，不要尝试利用本地存储的优势取代cookies。

简单吗？去尝试本地存储相对于cookies得优势吧。

原文：http://thejackalofjavascript.com/storing-objects-html5-local-storage/