Javascript 基于cookie或本地存储在收藏列表中保存收藏页
新页面名称 /* *创建具有名称和值的cookie。 *在您的情况下,该值将是一个json数组。 */ 函数createCookiename,值,天{ var expires=, 日期=新日期; 如果天{ date.setTimedate.getTime+days*24*60*60*1000; expires=';expires='+date.togmString; } document.cookie=name+'='+value+expires+';path=/'; } /* *按名称读取cookie。 *在您的情况下,返回值将是一个保存了页面列表的json数组。 */ 函数readCookiename{ 变量nameEQ=name+'=', allCookies=document.cookie.split';', 我 曲奇 对于i=0;iJavascript 基于cookie或本地存储在收藏列表中保存收藏页,javascript,Javascript,新页面名称 /* *创建具有名称和值的cookie。 *在您的情况下,该值将是一个json数组。 */ 函数createCookiename,值,天{ var expires=, 日期=新日期; 如果天{ date.setTimedate.getTime+days*24*60*60*1000; expires=';expires='+date.togmString; } document.cookie=name+'='+value+expires+';path=/'; } /* *按名称读取co
<!DOCTYPE html>
<html>
<head>
<title>New page name</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>
/*
* Create cookie with name and value.
* In your case the value will be a json array.
*/
function createCookie(name, value, days) {
var expires = '',
date = new Date();
if (days) {
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = '; expires=' + date.toGMTString();
}
document.cookie = name + '=' + value + expires + '; path=/';
}
/*
* Read cookie by name.
* In your case the return value will be a json array with list of pages saved.
*/
function readCookie(name) {
var nameEQ = name + '=',
allCookies = document.cookie.split(';'),
i,
cookie;
for (i = 0; i < allCookies.length; i += 1) {
cookie = allCookies[i];
while (cookie.charAt(0) === ' ') {
cookie = cookie.substring(1, cookie.length);
}
if (cookie.indexOf(nameEQ) === 0) {
return cookie.substring(nameEQ.length, cookie.length);
}
}
return null;
}
/*
* Erase cookie with name.
* You can also erase/delete the cookie with name.
*/
function eraseCookie(name) {
createCookie(name, '', -1);
}
var faves = new Array();
$(function(){
var url = window.location.href; // current page url
$(document.body).on('click','#addTofav',function(e){
e.preventDefault();
var pageTitle = $(document).find("title").text();
var fav = {'title':pageTitle,'url':url};
faves.push(fav);
var stringified = JSON.stringify(faves);
createCookie('favespages', stringified);
location.reload();
});
$(document.body).on('click','.remove',function(){
var id = $(this).data('id');
faves.splice(id,1);
var stringified = JSON.stringify(faves);
createCookie('favespages', stringified);
location.reload();
});
var myfaves = JSON.parse(readCookie('favespages'));
faves = myfaves;
$.each(myfaves,function(index,value){
var element = '<li class="'+index+'"><h4>'+value.title+'</h4> <a href="'+value.url+'">Open page</a> '+
'<a href="javascript:void(0);" class="remove" data-id="'+index+'">Remove me</a>';
$('#appendfavs').append(element);
});
});
</script>
</head>
<body>
<a href="javascript:void(0);" id="addTofav">Add me to fav</a>
<ul id="appendfavs">
</ul>
</body>
</html>
页面将类似于以下内容:
createCookie此函数将在用户浏览器中使用指定的名称创建新cookie,在您的情况下,名称为:favespages,您可以使用任何您想要的名称。它有3个参数,现在我使用2个参数:name和value,cookie的name和pagesjson对象的value,我们在其中存储所有fav页面。days参数用于指定您正在创建的特定cookie的有效期
readCookie此函数用于从用户存储fav页面的浏览器中获取cookie。若用户在favespages cookie中并没有任何页面,那个么它将是空的。从cookie中获取字符串后,我需要将该字符串转换回json对象以打印页面列表。为此,我使用JSON.parsereadCookie'favespages'
为了更熟悉这个概念,您必须仔细研究代码,看看当您在此处更改某些内容时会发生什么。非常感谢您的回答我在理解此代码时遇到问题,请您解释一下您再次使用的函数,谢谢您,例如,此函数的作用exactky函数createCookiename,value, days@user6362236createCookie,在用户浏览器中使用指定的名称制作cookie,或者如果具有该名称的cookie已经存在,则它将更新cookie和我们添加的新值。我对函数做了评论,现在让你们知道这个函数在做什么,非常感谢你们的解释。我点击AddMetoFAV,但在这个最喜欢的结果保存的页面上什么也没发生。我的意思是,我想我必须指定一个我最喜欢的页面所在的目标页面,并保存在那里?这将添加到fav页面上,并使用它的url。