H5 localStorage 和 sessionStorage 对json的处理方式

Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。
除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。

但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生（来自@otakustay 的纠正）

一、

先完成session基础方法，构建方法

//session缓存  键值对
    this.setObject = function (key, obj)
    {
        var str = null;
        if (obj != null && obj != undefined)
        {
            str = JSON.stringify(obj);
        }
        sessionStorage.setItem(key, str);
    }
    //移除指定的session存储
    this.remove = function (key)
    {
        sessionStorage.removeItem(key);
    };
    //获取session存储的对象
    this.getObject = function (key)
    {
        var str = sessionStorage.getItem(key);
        if (str == undefined || str == null || str.length == 0) return null;

        try
        {
            var obj = eval('(' + str + ')');
            return obj;
        }
        catch (e)
        {
            return null;
        }
    };

二、

完成对json公共方法，对处理的方法进行封装

//向session中添加数据
    //key自定义名称  ID动态生成   自定义json
    this.wapcarinfoadd = function(key,id,json){
        var listCarinfo = getObject(key);
        var obj = {};
        if(listCarinfo != null && listCarinfo != ""){    //判断是不是第一次添加数据
            listCarinfo[id] = json;
            setObject(key,listCarinfo);    
        }else{
            obj[id] = json;
            setObject(key,obj);
        }
    };
    //删除session的数据中指定数据
    //key查询自定义名称  ID动态生成删除
    this.wapcarinfodel = function(key,id){
        var listCarinfo = getObject(key);
        carjson = JSON.parse(JSON.stringify(listCarinfo));
        delete carjson[id];
         remove(key);
         setObject(key,carjson);
    };

三、

对方法进行测试

//添加

function clikes(){
    for (i=0;i<10;i++) {
        var carinfoid = "carinfo"+i;
        var jsons = {carinfoid:i};
        wapcarinfoadd("carinfo_list",carinfoid,jsons);
    }
}

//读取

function jiexie(){
    var listCarinfo = getObject("carinfo_list");
    var num = 0;
    var html = "";
    for(var a in listCarinfo){
        num++;
           html += "<div>id++++++++++++++++++++++++ "+listCarinfo[a].carinfoid+"<button οnclick=\"yichu(\'"+a+"\')\">移除</button></div>";
    }
    $(".sss").html(html);
}
// 删除
function yichu(id){
    wapcarinfodel("carinfo_list",id);
    jiexie();
}

免费下载地址 ： http://download.csdn.net/detail/qq_21170031/9665414