<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>测试cookie</title> <script src="jquery-1.11.2.min.js"></script> <script src="jquery.cookie.js"></script> <script> var initData = [{ "id": 1, "num": 10, "title": "矿泉水" }, { "id": 2, "num": 10, "title": "橙汁" }]; $(function () { //简单存储 $.cookie("test-001", JSON.stringify(initData)); var data = existOrSave("test-001"); for (var i = 0; i < data.length; i++) { console.log("修改之前", data[i].id, data[i].num, data[i].title); } //新增 addData(25, 150, "农夫山泉", data); //修改指定记录 updateData(1, 1000, data); for (var i = 0; i < data.length; i++) { console.log("修改之后", data[i].id, data[i].num, data[i].title); } //删除指定记录 var newData = deleteData(2, data); for (var i = 0; i < newData.length; i++) { console.log("删除之后", newData[i].id, newData[i].num, newData[i].title); } var newData2 = getData(25, newData); console.log("获取记录", newData2.id, newData2.num, newData2.title); // var data2 = existOrSave("test-002"); if (data2.length <= 0) { console.log("无数据"); } }) //判断是否存在，如果... var existOrSave = function (key) { var resultData = $.cookie(key) if (!resultData || resultData == undefined) { return resultData = []; } return JSON.parse($.cookie(key)); } //新增数据记录 var addData = function (id, num, title, data) { data.push({ "id": id, "num": num, "title": title }); } //修改数据记录 var updateData = function (id, num, data) { for (var i = 0; i < data.length; i++) { if (data[i].id === id) { data[i].num = num; } } }; //删除数据记录 var deleteData = function (id, data) { var tempData = []; for (var i = 0; i < data.length; i++) { if (data[i].id === id) { delete data[i]; } else { tempData.push(data[i]); } } return tempData; } // 根据ID返回一条记录 var getData = function (id, data) { var tempData = {}; for (var i = 0; i < data.length; i++) { if (data[i].id === id) { tempData = data[i]; break; } } return tempData; } </script> </head> <body> <div> 测试cookie </div> </body> </html>