cookie记录列表

我需要一个临时列表的功能，比如像现在一些视频网站的播放历史记录这样，不过我想要的是：左边是一个列表，列表里有几条数据，比如这样，左边是列表，点击+将此条数据添加到cookie，右边实时显示，然后右边取得的cookie点击-号可以删除。
请大神们帮帮忙，菜鸟在此先谢了~~~

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

JS操作COOKIE,一搜有的是资料.你只不过需要用DIV+CSS建立一个侧栏,向里面添加项目也不是什么问题.
总之都是基础,一点技术难点都没有.既然是新手,慢慢学吧.
学啥练啥用啥。总要你能会吗。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function init(){
var input=document.getElementsByTagName("input");
for(var i=0;i<input.length;i++){
if(input[i].type=="button"){
input[i].style.backgroundColor="white";
input[i].style.border="none";
if(input[i].value=="+"){
input[i].onclick=addcookie;
}else if(input[i].value=="-"){
input[i].onclick=removecookie;
}
}
}
}
function addcookie(){
var li=this.previousSibling;
var cookie=document.cookie;
var begin=cookie.indexOf("list");
if(begin!=-1){
var end=cookie.indexOf(";",begin);
if(end==-1){
end=cookie.length;
}
var c=cookie.substring(begin+5,end);
if(c.indexOf(li.innerHTML)==-1){
c+=","+li.innerHTML;
document.cookie="list="+c+";max-age=100000";
}
}else{
document.cookie="list="+li.innerHTML+";max-age=100000";
}
alert("addcookie:"+document.cookie);
show();
}
function removecookie(){
var li=this.previousSibling;
var cookie=document.cookie;
var begin=cookie.indexOf("list");
if(begin!=-1){
var end=cookie.indexOf(";",begin);
if(end==-1){
end=cookie.length;
}
var c=cookie.substring(begin+5,end);
c=c.split(",");
for(var i in c){
if(c[i]==li.innerHTML){
delete c[i];
}
}
c=c.toString();
document.cookie="list="+c+";max-age=100000";
}
alert("removecookie"+document.cookie);
show();
}
function show(){
var ul=document.getElementById("test");
var sun=ul.childNodes;
var l=sun.length;
for(var i=0;i<l;i++){
ul.removeChild(sun[0]);
}
var cookie=document.cookie;
var begin=cookie.indexOf("list");
if(begin!=-1){
var end=cookie.indexOf(";",begin);
if(end==-1){
end=cookie.length;
}
var c=cookie.substring(begin+5,end);
c=c.split(",");
for(var i in c){
if(c[i]){
var li=document.createElement("li");
var a=document.createElement("a");
a.innerHTML=c[i];
var input=document.createElement("input");
input.type="button";
input.value="-";
input.style.backgroundColor="white";
input.style.border="none";
li.appendChild(a);
li.appendChild(input);
ul.appendChild(li);
}
}
}
init();
}
function deletecookie(){
document.cookie="list=";
}
window.onload=function(){init();deletecookie();}
</script>
</head><body>
<table>
<th>列表</th>
<th>显示</th>
<tr>
<td>
<ul>
<li><a>name1</a><input type="button" value="+"></li>
     <li><a>name2</a><input type="button" value="+"></li>
     <li><a>name3</a><input type="button" value="+"></li>
     <li><a>name4</a><input type="button" value="+"></li>
</ul>
    </td>
    <td>
     <ul id="test"></ul>
    </td>
</tr>
</table>
</body>
</html>
这样试试  谷歌不支持的
你好，感谢你的帮助，我的代码给了我点参考，我根据你的代码修改了一下，但是有几个问题，希望帮忙看一下，
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function $(id){ return document.getElementById(id)}
function setCookie(setOn){
var exp = new Date();
exp.setDate(exp.getDate() + 365);
var cookie=document.cookie;
var begin=cookie.indexOf("Apple:/");
if(begin!=-1){
var end=cookie.indexOf(";",begin);
if(end==-1){
end=cookie.length;
}
var c=cookie.substring(begin+5,end);
if(c.indexOf(setOn)==-1){
c+=","+setOn;
document.cookie="Apple:/" + "="+ c + ";expires=" + exp.toUTCString();
}
}else{
document.cookie = "Apple:/" + "="+ setOn + ";expires=" + exp.toUTCString();
}
showCookie();
}
function getCookie(name){
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg)) return unescape(arr[2]);
else return null;
}
function delCookie(delOn){
var exp = new Date();
exp.setDate(exp.getDate() + 365);
var cookie=document.cookie;
var begin=cookie.indexOf("Apple:/");
if(begin!=-1){
var end=cookie.indexOf(";",begin);
if(end==-1){
end=cookie.length;
}
var c=cookie.substring(begin+5,end);
c=c.split(",");
for(var i in c){
if(c[i]==delOn){
delete c[i];
}
}
c=c.toString();
document.cookie="Apple:/="+c+";expires=" + exp.toUTCString();
}
showCookie();
}function showCookie(){
if(!getCookie("Apple:/"))return false;
listarr=getCookie("Apple:/").split(',');
var mylist='<ul>';
Listlength=listarr.length;
for(i=0;i<Listlength;i++){
mylistarrfind=listarr[i].split('|');
mylist+='<a href="1/'+mylistarrfind[0]+'.html" '+'>'+(i+1)+'.'+mylistarrfind[1]+mylistarrfind[2]+'</a><span onclick="delCookie(\''+listarr[i]+'\');">-</span>\n';
}
mylist+='</ul>';
$("mylist").innerHTML=mylist;
return false;
}
window.onload=function(){showCookie();}
</script>
</head><body>
<li><a>name1</a><input type="button" onclick="setCookie('321|中文|汉字');" value="+"></li>
  <li><a>name2</a><input type="button" onclick="setCookie('251|英文|Hello');" value="+"></li>
  <li><a>name3</a><input type="button" onclick="setCookie('666|呵呵|开心');" value="+"></li>
  <li><a>name4</a><input type="button" onclick="setCookie('520|你好吗|亲');" value="+"></li>
<br><br><br><div id="mylist">2</div>
</body>
</html>这个代码兼容谷歌，你那个代码应该是previousSibling这个函数谷歌不兼容。
然后我这段代码有几个问题，
1.添加以后删除有BUG，比如1,2,3  3条数据，我删除2，变成1，，3。 2这个字删掉了但，号还在  还是3条数据。2.不能删除第一条。目前就这些，请帮忙看一下，  感谢你的帮助
这里没什么批量操作，只是你思路转换一下，为什么一定要是一条一条的加入cookie，而不能是保持只有一条记录，但用某个字符做分隔呢？比如：记录1|记录2|记录3  这样的格式呢？？添加时：从已有cookie的时候进行判断，如果已经存在则不做处理,否则附加去最后
删除时：遍历，找到对等的，移除它
呵呵，我还奇怪你这么不回我贴呢，  我看你好晚都还在回别人帖，   说的是，这不是批量操作，我把它当数据库了，我就是还没玩过cookie不知道它是什么情况，了解了一点以后  我改那代码已经就是用，和|来分隔操作了，  你说的那添加操作是那么回事，可是不会写代码嘛~  还好前边那人写出来了一些，我知道该怎么判断。编程这东西就是要先有思路  有用代码
COOKIE是存一个带分隔符的数据列表,还是存成多个项目,都是可以的.这根本不是问题.
我给你列举一下apple.com在客户端存放的COOKIE项目:
pxro=1
s_invisit-n2_us=19,8
s_pathLength=...
s_ppv=...
s_pv=...
s_vi=...
s_vnum_n2_us=...
看到别人做数学题做了一个1+1=2,你以为数学就只是1+1=2吗?
做程序员,脑筋必须灵活,这么死板就完了.
亲们，谁能拔刀相助一下呢这小段代码我也捣鼓的差不多了，就是现在还有几个问题自己不懂谁来指点一下。。
那代码：第一条删不掉。其他条删除内容是没了，数量还存在。还有我每操作一次查看cookie，发现都会多加一个=号，这是什么意思，有影响吗
好吧，  我自己解决了，不知道对不对，但是看上去可以用。把代码贴上做个记号吧
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function $(id){ return document.getElementById(id)}
function setCookie(setOn){
var exp = new Date();
exp.setDate(exp.getDate() + 365);
var cookie=document.cookie;
var begin=cookie.indexOf("list");
if(begin!=-1){
var end=cookie.indexOf(";",begin);
if(end==-1){
end=cookie.length;
}
var c=cookie.substring(begin+5,end);
if(c.indexOf(setOn)==-1){
c+=","+setOn;
document.cookie="list="+c+";expires="+exp.toUTCString();
}
}else{
document.cookie="list="+setOn+";expires="+exp.toUTCString();
}
showCookie();
}
function getCookie(name){
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg)) return unescape(arr[2]);
else return null;
}
function delCookie(delOn){
var exp = new Date();
exp.setDate(exp.getDate() + 365);
var cookie=document.cookie;
var begin=cookie.indexOf("list");
if(begin!=-1){
var end=cookie.indexOf(";",begin);
if(end==-1){
end=cookie.length;
}
var c=cookie.substring(begin+5,end);
c=c.split(",");
for(var i in c){
if(c[i]==delOn){
delete c[i];
}
}
c=c.toString();
document.cookie="list="+c+";expires="+exp.toUTCString();
}
alert("removecookie:  "+document.cookie);
showCookie();
}function showCookie(){
if(!getCookie("list"))return false;
listarr=getCookie("list").split(',');
var mylist='<ul>';
Listlength=listarr.length;
for(i=0;i<Listlength;i++){
if(listarr[i]){
mylistarrfind=listarr[i].split('|');
mylist+='<a href="1/'+mylistarrfind[0]+'.html" '+'>'+(i+1)+'.'+mylistarrfind[1]+mylistarrfind[2]+'</a><span onclick="delCookie(\''+listarr[i]+'\');">-</span>\n';
}
}
mylist+='</ul>';
$("mylist").innerHTML=mylist;
return false;
}
window.onload=function(){showCookie();}
</script>
</head><body>
<li><a>ajax</a><input type="button" onclick="setCookie('321|ajax|good');" value="+"></li>
  <li><a>today</a><input type="button" onclick="setCookie('251|today|Hello');" value="+"></li>
  <li><a>left</a><input type="button" onclick="setCookie('777|left|Oh');" value="+"></li>
  <li><a>How are you</a><input type="button" onclick="setCookie('520|How are you|baby');" value="+"></li>
<br><br><br><div id="mylist">2</div>
</body>
</html>