首页 > 代码库 > 怎么用cookie做一个选项卡？
怎么用cookie做一个选项卡？
什么是cookie?
Cookies虽然一般都以英文名呈现，但是它还是有一个可爱的中文名“小甜饼”。Cookies是指服务器暂存放在你的电脑里的txt格式的文本文件资料，主要用于网络服务器辨别电脑使用。比如浏览网站时，Cookies 记录下来你输入的一些资料和信息。再访问同一个网站，就会依据Cookie里的内容来判断使用者，送出特定的信息内容给你。
Cookies有什么作用?
首先，它在使用上更便捷，比如你之前在我们新浪微博上进行登陆过用户名。下次，再登陆时，系统就可以默认你的用户名甚至是密码，节省了你的时间。
第二，网站利用Cookies跟踪统计用户访问该网站的习惯，做出自己的服务调整。一方面是方便为用户提供个性化的服务，另一方面，也可以为网站经营策略带来创新，就如同不记名的问卷调查。
虽然，Cookies 最广泛的是记录用户登录信息，比如自动登陆，但是它也存在用户信息泄密的问题。另外，也有侵犯隐私的嫌疑，比如我们登陆淘宝后，再登陆其他有淘宝推荐广告的网站会直接出现我们在淘宝搜索过的信息。
如何设置Cookies？
由于cookies与用户隐私权的问题并没有相关法律约束，很多网站仍然在利用cookie跟踪用户行为，为此，小编在此特地为你提供限制cookie设置方法。
IE浏览器，菜单“工具-Internet选项-隐私”来查看和修改，通过“隐私”选项中的高低来决定是否允许网站利用cookie跟踪自己的信息，另外，也可以通过手动输入具体的网站设置允许或者禁止使用Cookies进行编辑。
说了这么多，该进入我们的主题：选项卡问题刷新后怎么保持原来的选项。
以下是是解决问题的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选项卡</title>
<style>
*{
padding: 0;
margin: 0;
}
li{
list-style: none;
}
#wrap{
width: 400px;
height: 340px;
border: 1px solid black;
margin: 100px auto;
}
ul{
height: 34px;
border-bottom: 1px solid black;
line-height: 34px;
}
li{
float: left;
width: 132px;
height: 33px;
border-left: 1px solid black;
text-align: center;
cursor: pointer;
}
#box div{
text-align: center;
line-height: 100px;
}
.on{
background: pink;
}
</style>
<script>
window.onload=function(){
var oDox=document.getElementById("wrap");
var aLi=document.getElementsByTagName("li");
var aDiv=oDox.getElementsByTagName("div");
for(var i=0;i<aLi.length;i++){
aLi[i].index=i;
aLi[i].onclick=function(){
for(var i=0;i<aLi.length;i++){
aLi[i].className="";
aDiv[i].style.display="none";
setCookie("index",this.index,1)
}
this.className="on";
aDiv[this.index].style.display="block";
}
}
//判断是有cookie值
if(getCookie("index")){
for(var i=0;i<aLi.length;i++){
aLi[i].className=‘‘;
aDiv[i].style.display=‘none‘
}
aLi[getCookie(‘index‘)].className=‘on‘;
aDiv[getCookie(‘index‘)].style.display=‘block‘;
}
///设置cookie
function setCookie(name,value,iDay){
if(iDay){
var oDate=new Date();
oDate.setDate(oDate.getDate()+iDay);
document.cookie=name+‘=‘+value+‘;path=/;expires=‘+oDate;
}else{
document.cookie=name+‘=‘+value+‘;path=/‘;
}
};
//获取cookie
function getCookie(name){
var arr=document.cookie.split("; ");
for(var i=0;i<arr.length;i++){
var arr1=arr[i].split("=");
if(arr1[0]==name){
return arr1[1];
}
}
return "";
}
}
</script>
</head>
<body>
<div id="wrap">
<ul>
<li class="on">tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<div>tab1</div>
<div>tab2</div>
<div>tab3</div>
</div>
</body>
</html>
希望能帮到大家。
怎么用cookie做一个选项卡？
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。