js中离线存储cookie使用方法
2017-03-04 本文已影响106人
虚幻的锈色
【cookie】
平时我们经常在页面中使用一些能存储数据的方法，比如记录页面上次打开的位置，选项点击的位置，经常输入的记录，等等等。很多用到。但是目前用的少因为H5有新的方法，我下一篇会讲，不要着急~
注：必须在服务器环境下
服务器
提供计算机服务的设备，电脑
1、响应浏览器的请求
2、存东西
cookie干什么：
可以临时在浏览中中储存一些东西
特点
1、必须放在服务器环境
2、不安全（想看就看，想删就删）
3、cookie有生命周期,默认关闭浏览器就消失
4、有大小4K左右（cookie比较珍贵）
cookie的条数300个（一个浏览器）
每个网站cookie的条数不能超过20个
怎么用它?
存、写:document.cookie='name=value; expires='时间期限'; path=路径';
取、读：document.cookie
在浏览器中怎么看？
打开浏览器控制台，Application中的Storage中Cookie看即可。不同浏览器些许不同。
document.cookie=123; //直接这样存
alert(document.cookie) //123
//或者是这样 ：
document.cookie='password=123';
alert(document.cookie) //password=123
下面就开始直接进入话题，不啰嗦。
但是 cookie是有到期时间的，如果默认不写时间，是一个会话就没了，
expires cookie到期时间，可以随便设置，默认是session。
session 会话（一段时间）：一个会话是指浏览打开到关闭。
var oDate=new Date();
oDate.setDate(oDate.getDate()+3);
document.cookie='password=123; expires='+oDate; //这样时间就是三天后，也可不用时间对象，直接写。
alert(document.cookie) //password=123
cookie是有路径的，cookie默认存在当前文件路径中。
路径：
cookie默认存在当前文件路径中
里层文件可以去到外层文件存的cookie，外层文件取不到里层文件存的cookie
但是一般我们一个项目就用一套cookie，所以我们都存在根目录下：
var oDate=new Date();
oDate.setDate(oDate.getDate()+3);
document.cookie='password=123; expires='+oDate+'; path=/'; //注：/代表根目录下
不啰嗦，太简单，那我们就先封装一个cookie方便以后用：
//设置
function setCookie(sName,sValue,iDay){
if(iDay){ //有时候我们并不会存时间，所有要判断一下
var oDate=new Date(); //先new一个时间对象，
oDate.setDate(oDate.getDate()+iDay); //设置时间对象：我们要给cookie到期时间
document.cookie=sName+'='+sValue+'; expires='+oDate+'; path=/'; //开始存
}else{
document.cookie=sName+'='+sValue+'; path=/'; //如果不需要时间的话，这样存
}
}
//获取
function getCookie(sName){
var str=document.cookie; //cookie获取下来是一串字符串，
var arr=str.split('; '); //然后我们切成数组
// arr -> password=123,n2=qq,abc=123
for(var i=0;i<arr.length;i++){ //循环数组，
//arr[i] -> password=123
var arr2=arr[i].split('='); //在把每一条切开成数组
//[password,123]
if(arr2[0]==sName){ //用我们要的那条cookie名字和每一条cookie的名字对比
return arr2[1] //如果一样，就把值给返回出去。
}
}
return '' //如果最后没有我们也返回相同的数据格式，空字符串
}
//删除
function removeCookie(sName){
setCookie(sName,'',-1); //删除就直接把那条cookie时间设置成-1就行
}
比如我就来写一个Cookie使用的例子吧：
那就拿最常用的效果选项卡来说吧
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>李鹏-前端开发-两年经验-13522974525</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
div{
width: 100px;
height: 100px;
background: red;
display: none;
}
div.on{
display: block;
}
input.on{
background: blue;
}
</style>
<script src="cookie.js"></script>
<script>
window.onload=function(){
var aInp=document.getElementsByTagName('input');
var aDiv=document.getElementsByTagName('div');
function tab(index){
var index=index || 0; //这个是为了下面，因为下面直接调用了一下，有时候没有存cookie，所有就让没存的情况下默认为0.
for(var i=0;i<aInp.length;i++){
aInp[i].className='';
aDiv[i].className='';
}
aInp[index].className='on';
aDiv[index].className='on';
}
//设置cookie
tab(getCookie('index'));//页面一打开调用一下，让自动停留在我们上次点击的那个选项上。
for(var i=0;i<aInp.length;i++){
(function(index){
aInp[i].onclick=function(){
tab(index);
setCookie('index',index,3); //开始存我们的cookie，记录选项停留在哪个上面。
};
})(i);
}
};
</script>
</head>
<body>
<input type="button" value="aaa" class="on"/>
<input type="button" value="bbb"/>
<input type="button" value="ccc"/>
<div class="on">111</div>
<div>222</div>
<div>333</div>
</body>
</html>
以上结束。
