标签：function index ks html cookie 应用 var localStorage model
cookie与localStorage的应用
cookie
-
存储的数据是临时的
-
可以通过JS设置过期时间
-
只能存储文本字符串
示例
//读取Cookie
var listData=getCookie("videolist1");
//判断listData是否存在
if(listData!=""){
//将字符串转换成数组
var shuzu=listData.split(",");
//遍历数组
for (var index = 0; index < shuzu.length; index++) {
$("#ks-model .ks-li").html(shuzu[index]);
$("#ks-ol").append($("#ks-model").html());
}
}else{
//testVideoList不存在时执行
getUserInfo();
}
//请求用户数据
function getUserInfo(){
$.ajax({
url: "/plus/json.aspx",
type: "get",
dataType: "json",
beforeSend: function () {
$(".qingqiu").show();
},
success: function (res) {
$(".qingqiu").hide();
//创建数组
var ls=[];
for (var index = 0; index < res.data.length; index++) {
const element = res.data[index];
$("#ks-model .ks-li").attr("data-id", element.periodid);
$("#ks-model .ks-li").html(element.periodname);
$("#ks-model .ks-li").attr("href", "ksdetails.html?prdid=" + element.periodid);
$("#ks-ol").append($("#ks-model").html());
//添加数据到数组
ls.push(element.periodname);
}
//将数组转换成字符串
var vList=ls.concat();
//写入Cookie
setCookie('videolist1', vList, 1 );
},
error: function (e) {
$(".qingqiu").html("加载失败！");
}
})
}
// 写入缓存的方法 三个参数分别是 cookie名称 cookie值 cookie过期时间
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires=" + d.toGMTString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
// 读取缓存的方法
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i].trim();
if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
}
return "";
}
localStorage
-
存储的数据时永久存在本地的
示例
//读取localStorage
var testVideoList= localStorage.getItem("testVideo");
//判断是否存在
if(testVideoList!=null){
//遍历JSON对象
$.each(JSON.parse(testVideoList),function(idx,obj){
$("#ks-model .ks-li").attr("data-id", obj.periodid);
$("#ks-model .ks-li").html(obj.periodname);
$("#ks-model .ks-li").attr("href", "ksdetails.html?prdid=" + obj.periodid);
$("#ks-ol").append($("#ks-model").html());
})
}else{
//testVideoList不存在时执行
getUserInfo();
}
//请求用户数据
function getUserInfo(){
$.ajax({
url: "/plus/json.aspx",
type: "get",
dataType: "json",
beforeSend: function () {
$(".qingqiu").show();
},
success: function (res) {
//写入数据到localStorage ，存为JSON字符串
localStorage.setItem("testVideo",JSON.stringify(res.data));
$(".qingqiu").hide();
for (var index = 0; index < res.data.length; index++) {
const element = res.data[index];
$("#ks-model .ks-li").attr("data-id", element.periodid);
$("#ks-model .ks-li").html(element.periodname);
$("#ks-model .ks-li").attr("href", "ksdetails.html?prdid=" + element.periodid);
$("#ks-ol").append($("#ks-model").html());
}
},
error: function (e) {
$(".qingqiu").html("加载失败！");
}
})
}
标签：function,index,ks,html,cookie,应用,var,localStorage,model 来源： https://www.cnblogs.com/bxybk/p/14668305.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。