一、cookie基础
1、什么是cookie
•页面用来保存信息
–比如:自动登录、记住用户名
2、cookie的特性
–同一个网站中所有页面共享一套cookie
–数量、大小有限 一般以k为单位,比如4k.5k
–过期时间 ,使用js来控制
-存在客户端,用户计算机的文件,敏感重要的东西不要放到cookie
-只有在服务器环境下运行
•JS中使用cookie
document.cookie='blue';alert(document.cookie);
可以运行火狐浏览器查看cookie信息,如果不指定过期时间,默认到到浏览器关闭为止
指定过期时间如下:
var oDate=new Date();oDate.setDate(oDate.getDate()+30);document.cookie="user=blue;expires="+oDate;document.cookie="pass=123";alert(document.cookie);
3.查看:document.cookie
二、使用cookie
cookie的使用
•设置cookie
function setCookie(name, value, iDay){ var oDate=new Date(); oDate.setDate(oDate.getDate()+iDay); document.cookie=name+'='+value+';expires='+oDate;}
–格式:名字=值
–不会覆盖
–过期时间:expires=时间
»日期对象的使用
–封装函数
•读取cookie
–字符串分割
function getCookie(name){ //'username=abc; password=123456; aaa=123; bbb=4r4er' var arr=document.cookie.split('; '); var i=0; //arr->['username=abc', 'password=123456', ...] for(i=0;i['username', 'abc'] var arr2=arr[i].split('='); if(arr2[0]==name) { return arr2[1]; } } return '';}
•删除cookie
–已经过期
function removeCookie(name){ setCookie(name, '1', -1);}
cookie的使用
•例子
–用cookie记录上一次Div的位置 cookie结合拖拽
无标题文档
»鼠标抬起——记录位置
»window.onload——读取位置
–用cookie记录上次登录的用户名
»提交时——记录用户名
»window.onload——读取用户名
无标题文档
总结:
1. 什么是 cookie、cookie 特性
2. js 中的 cookie:设置 document.cookie3. cookie 不会覆盖4. cookie 过期时间:expires、setDate5. 封装设置 cookie 函数6. 封装获取 cookie 函数7. 封装删除 cookie 函数8. cookie 接合拖拽实例9. cookie 记录用户名实例