Jquery Json Cookie Demo

Jquery Json Cookie Demo

 

需求：購物商品記錄在cookie中。需要記錄必須的商品信息。把json存儲在cookie中是一個很好的方法。

 

下面是Jquery Json Cookie Demo 的介紹

 

1.首先導入三個jquery文件

 

2.顯示所有在cookie中的數據

function showAllDataInCookie(){
	var johnnyGoodsHistory = $.JSONCookie("johnnyGoodsHistory");//读取json格式cookie
	//remove all data
	$("#showTable .dataRow").remove();
	
	if (typeof (johnnyGoodsHistory.goods) != "undefined"||johnnyGoodsHistory.goods!=null) {//判断cookie是否存在
		for (var i = 0; i < johnnyGoodsHistory.goods.length; i++) {
			$("#showTable").append("<tr class='dataRow'><td>"+johnnyGoodsHistory.goods[i].goodId+"</td><td>"+johnnyGoodsHistory.goods[i].goodsName+"</td><td>"+johnnyGoodsHistory.goods[i].goodsPrice+"</td></tr>");
		}
	}
}

3.添加數據到cookie中，如果沒有數據，則新建。如果有數據，並且id重複，則刪除本行，在添加到最後。如果id不重複，則直接添加在最後一行。

function addHistory(){
	var johnnyGoodsHistory = $.JSONCookie("johnnyGoodsHistory");//读取json格式cookie
        var goodId = $("#goodId").val();
		var goodsName= $("#goodsName").val();
        var goodsPrice = $("#goodsPrice").val();
        if (typeof (johnnyGoodsHistory.goods) == "undefined") {//判断cookie是否存在
            johnnyGoodsHistory = { "goods": [
            { "goodId": goodId, "goodsName": goodsName, "goodsPrice": goodsPrice}]
            };
            $.JSONCookie("johnnyGoodsHistory", johnnyGoodsHistory, { path: '/', expires: 20 });//存储json格式cookie
        }else {
            var flag = false;
            for (var i = 0; i < johnnyGoodsHistory.goods.length; i++) {
                if (johnnyGoodsHistory.goods[i].goodId == goodId) {
					johnnyGoodsHistory.goods.splice(i,1);
					var tmp = { "goodId": goodId, "goodsName": goodsName, "goodsPrice": goodsPrice};
					johnnyGoodsHistory.goods.push(tmp);//添加
					$.JSONCookie("johnnyGoodsHistory", johnnyGoodsHistory, { path: '/', expires: 20 });//保存
                    flag = true; 
					break;
                }
            }
            if (!flag) {
                if (johnnyGoodsHistory.goods.length >= 10) {
                    //delete johnnyGoodsHistory.goods[0];//只能致空，没有删除
                    johnnyGoodsHistory.goods.splice(0,1);//删除第一行
                }
                var tmp = { "goodId": goodId, "goodsName": goodsName, "goodsPrice": goodsPrice};
                johnnyGoodsHistory.goods.push(tmp);//添加
                $.JSONCookie("johnnyGoodsHistory", johnnyGoodsHistory, { path: '/', expires: 20 });//保存
            }
        }
		
	showAllDataInCookie();
}

4.清空cookie中的內容

function clearHistory() {
    $.cookie("johnnyGoodsHistory", null, { path: '/' });//删除cookie
	
	showAllDataInCookie();
}

5.當頁面加載完成後綁定事件

$(function(){	
	$("#addCookie").click(addHistory);
	$("#clearCookie").click(clearHistory);
	
	showAllDataInCookie();
});