<!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>