首页 > 代码库 > 原生js--cookie
原生js--cookie
原文:http://www.cnblogs.com/yufann/p/JS-Cookie.html
原生JS--COOKIE:
COOKIE基础及应用:
1.什么是COOKIE==>页面用来保存信息,比如:自动登录,记住用户名
2.COOKIE的特性:
--同一个网站中,所有的页面共享同一套cookie
--数量,大小有限(4k-10k,不能用来存大的内容)
--过期时间
3.设置cookie:(本地下测试cookie要在FF下面测试,IE,Chrom会把cookie去掉);
--格式:名字=值(多条数据通过‘; ‘(即分号和空格) 来分开)
--不会覆盖document.cookie="user=yufan";document.cookie="pass=123456";
--过期时间:expires=时间
--COOKIE与日期对象共同使用,设置过期时间
var oDate=new Date();
oDate.setDate(oDate.getDate()+14); //设置获取的日期,并不是系统日期
document.cookie="user=yufan; expires="+oDate; //这样设置的这个cookie将在14天后过期
4.将设置cookie封装成一个函数:
function setCookie(name,value,myDay){
var oDate=new Date();
oDate.setDate(oDate.getDate()+myDay);
document.cookie=name+‘=‘+value+‘; expires=‘+oDate;
}
setCookie(‘username‘,‘yufan‘,25);
setCookie(‘pass‘,‘123456‘,14);
5.读取cookie:对获取的document.cookie进行字符串分割
读取cookie封装成一个函数:
function getCookie(name){
//document.cookie获取当前网站的所有cookie
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 ‘‘;
}
alert(getCookie(username));
6.删除cookie:时间设置为已经过期的时间,系统自然会删除
function removeCookie(name){
setCookie(name,1,-1);
}
removeCookie(username,1,-1);
7.示例:记住用户登录的用户名和密码
方法:可以在用户第一次登录时用cookie记住登录的用户名和密码,
下次再打开页面时用户名和密码就自动出现在表单里面
--提交时:记住用户名
--window.onload:读取用户名
1 HTML代码: 2 <div id="cookie"> 3 <form id="form1" action=""> 4 用户名:<input type="text" name="username" value=""> 5 密码:<input type="password" name="password" value=""> 6 <input type="submit" name="" value="http://www.mamicode.com/登录"> 7 </form> 8 </div> 9 10 JS代码: 11 <script type="text/javascript"> 12 //cookie记住用户名,密码 13 window.onload=function(){ 14 var oForm=document.getElementById(‘form1‘); 15 var username=document.getElementsByName(‘username‘)[0]; 16 var pass=document.getElementsByName(‘password‘)[0]; 17 oForm.onsubmit=function(){ 18 setCookie(‘username‘,username.value,25); 19 setCookie(‘pass‘,pass.value,25); 20 } 21 username.value=http://www.mamicode.com/getCookie(‘username‘);>
原生js--cookie