本篇隨筆從cookie的入門開始，介紹了cookie的設置獲取和移除，還有一些小的應用案例：

一、設置cookie <script>
//設置cookie：
function setCookie(name,value,iDay){
if(iDay){
var oDate=new Date();
oDate.setDate(oDate.getDate()+3);
document.cookie=name+'='+value+';path=/;expires='+oDate;
}else{
document.cookie=name+'='+value+';path=/;';
}
}
setCookie('zhangsan','100',3);
setCookie('lisi','200');

</script>

二、獲取cookie:
<script>
//設置cookie：
function setCookie(name,value,iDay){
if(iDay){
var oDate=new Date();
oDate.setDate(oDate.getDate()+3);
document.cookie=name+'='+value+';path=/;expires='+oDate;
}else{
document.cookie=name+'='+value+';path=/;';
}
}
setCookie('zhangsan','100',3);
setCookie('lisi','200');
function getCookie(name){
var arr = document.cookie.split('; ');
for(var i =0 ;i < arr.length; i++){
var tmp = arr[i].split('=');
if(name == tmp[0]){
return tmp[1];
}
}
return '';
}
alert(getCookie('lisi'));
</script>

三、移除cookie:
<script>
//name：cookie名字,value:cookie 值; iDay: 過期時間
//setCookie(name,value,iDay);
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=/';
}
}

setCookie('zhangsan','100',3);
setCookie('lisi','200');

//getCookie(name);
//a=1; abc=123
function getCookie(name){
var arr = document.cookie.split('; ');
for(var i =0 ;i < arr.length; i++){
var tmp = arr[i].split('=');
if(name == tmp[0]){
return tmp[1];
}
}
return '';
}

//removeCookie(name);
function removeCookie(name){
setCookie(name,'as',-1);
}

removeCookie('lisi');

</script>

四、小案例：
1.選項卡中，離開頁面時停留在一模塊，再次打開時，還是那個模塊。
<style>
#box {
width: 400px;
height: 300px;
border: #000 1px solid;
margin: 100px auto;
}

#box a {
display: block;
float:left;
width: 100px;
height: 39px;
text-align:center;
line-height: 39px;
background:#ccc;
color: #333;
text-decoration:none;
border-bottom: #333 1px solid;
}

#box a.active{
background: #c00;
color: #fff;
width: 98px;
border-left: #333 1px solid;
border-right: #333 1px solid;
}

#box div{
width: 400px;
height: 260px;
text-align:center;
line-height:260px;
font-size:50px;
display:none;
}
</style>
<script>
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=/';
}
}

function getCookie(name){
var arr = document.cookie.split('; ');
for(var i = 0; i < arr.length; i++){
var tmp = arr[i].split('=');
if(name == tmp[0]){
return tmp[1];
}
}
return '';
}
window.onload = function(){
var oBox = document.getElementById('box');
var aBtn = oBox.getElementsByTagName('a');
var aDiv = oBox.getElementsByTagName('div');
//var index = 0;

var index = getCookie('tabIndex');
if(index){
tab();
}
function tab(){
for(var i = 0; i < aBtn.length; i++){
aBtn[i].className = '';
aDiv[i].style.display = 'none';
}
this.className = 'active';
aDiv[index].style.display = 'block';
}

for(var i = 0; i < aBtn.length; i++){
aBtn[i].index = i;
aBtn[i].onclick = function(){
index = this.index;
tab();
setCookie('tabIndex',this.index,10);
}
}
}
</script> ? ? ?

轉載于:https://www.cnblogs.com/beyrl-blog/p/6052479.html

總結

以上是生活随笔為你收集整理的cookie 二：的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。