[JS]笔记15之客户端存储cookie
来源:互联网 发布:门捷列夫没得奖 知乎 编辑:程序博客网 时间:2024/05/29 16:15
-->什么是cookie
-->cookie优缺点
-->cookie的设置、读取、删除
-->cookie应用
本地存储发展情况
一、什么是cookie
1、什么是cookie
cookie是存储于访问者计算机中的变量
cookie是浏览器提供的一种机制,可以由JavaScript对其进行操作(设置、读取、删除)
2、cookie的特性
cookie可以实现跨页面全局变量
cookie可以跨越同域名下的多个网页,但不能跨域使用
同一个网站中所有页面共享一套cookie
可以设置有效期限
存储空间为4KB左右
二、cookie优缺点
1、cookie的优点
cookie可以跨越同域名下的多个网页使用
cookie可以实现跨页面全局变量
同一个网站中所有页面共享一套cookie
可以设置有效期限
cookie机制将信息存储于用户硬盘,因此可以作为跨页面全局变量,这是它最大的一个优点
常用场合:(1)保存用户登录状态;(2)跟踪用户行为;(3)定制页面;(4)创建购物车 ...等等
2、cookie的缺点
(1)cookie可能被禁用;
(2)cookie与浏览器相关,不能互相访问;
(3)cookie可能被用户删除;
(4)cookie安全性不够高;
(5)cookie存储空间很小(只有4KB左右)
(6)cookie操作麻烦,没有方便的API
三、cookie的设置、读取、删除
1、Cookie设置
每个cookie都是一个名/值对(key=value)格式的字符串
例如: document.cookie="user1=YY";
如果要改变一个cookie的值,只需重新赋值
例如: document.cookie="user1=QQ";
设置有效期:
var dates=new Date();
dates.setDate(dates.getDate()+3); //按天数设置
document.cookie="user1=YY; expires="+dates;
2、读取cookie
document.cookie="user1=YY";
document.cookie="user2=MM";
var cookies=document.cookie; //获取
alert(cookies);
返回:"user1=YY; user2=MM"
只能够一次获取所有的cookie值
用户必须自己解析这个字符串,来获取指定的cookie值
split() 方法用于把一个字符串分割成字符串数组
3、cookie值编码处理
在cookie 的名或值中不能使用分号(;)、逗号(,)、
等号(=)以及空格等特殊符号。在cookie的名中做到这点很容易,但要保存的值可能是不确定的。
用escape( )函数进行编码,它能将一些特殊符号使用十六进制表示,从而可以存储于cookie值中
当使用escape( )编码后,在取出值以后需要使用unescape( )进行解码才能得到原来的cookie值。
4、删除cookie
cookie过期会自动消失
要删除一个cookie,可将其有效期设为一个过去的时间
例如:
var date=new Date();
dates.setDate(dates.getDate()-1);
document.cookie="user1=YY; expires="+dates;
cookie设置、获取、删除及编码处理代码练习:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>setCookie&getCookie&rmCookie</title> 6 </head> 7 <body> 8 <h1 id="con">注!!在服务器中打开看效果</h1> 9 <script>10 /*cookie设置*/11 var con=document.getElementById('con');12 document.cookie='user1=喽喽';13 document.cookie='user2=康康';14 document.cookie='user3=YY';15 document.cookie='user4=QQ';16 //设置有效期17 var dates=new Date();18 dates.setDate(dates.getDate()+7);19 document.cookie='user1=小楼欧;expires='+dates;20 /*setCookie-设置cookie值--封装函数*/21 function setCookie(key,val,Days){22 var dates=new Date();23 dates.setDate(dates.getDate()+Days);24 document.cookie=key+'='+escape(val)+';expires='+dates;25 }26 setCookie('user5','set函数1',20);27 setCookie('user6','set;函,数9890=1',20);28 /*cookie读取*/29 //1、一次获取所有的cookie值30 var cookies=document.cookie;31 console.log(cookies);//user=YY; user2=康康; user3=YY; user4=QQ; user1=小楼欧; user5=函数132 //2、必须自己解析这个字符串,来获取指定的cookie值33 var arr=cookies.split('; ');34 console.log(arr);//["user=YY", "user2=康康", "user3=YY", "user4=QQ", "user1=小楼欧", "user5=函数1"]35 var arr2=arr[4].split('=');36 console.log(arr2);//["user1", "小楼欧"]37 console.log(arr2[1]);//小楼欧38 /*getCookie--获取cookie值--封装函数*/39 function getCookie(key){40 var arr=document.cookie.split('; ');//获取所有的cookie值41 for (var i = 0; i < arr.length; i++) {42 var arr2=arr[i].split('=');//["user1", "小楼欧"]43 if (arr2[0]==key) {44 return unescape(arr2[1]);45 } 46 }47 return false;//没有返回false48 }49 console.log(getCookie('user2'));//康康50 console.log(getCookie('user6'));//set;函,数9890=151 /*rmCookie--删除cookie--封装函数*/52 var date2=new Date();53 date2.setDate(date2.getDate()-1);54 document.cookie='user4=11;expires='+date2;55 function rmCookie(key){56 setCookie(key,'0',-1);57 }58 rmCookie('user2');59 </script>60 </body>61 </html>
效果笔记:https://www.cnblogs.com/duenyang/
- [JS]笔记15之客户端存储cookie
- 【js学习笔记-104】-----客户端存储cookie
- web客户端存储之cookie
- js基础-客户端存储(Cookie、Storage、IndexedDB)
- PHP学习笔记【26】--客户端存储技术Cookie
- js手动存储cookie
- js cookie 存储封装
- 关于客户端存储:Cookie&WebStorage
- JQuery.cookie.js操作客户端cookie
- JS学习笔记之客户端检测
- node.js学习笔记之HTTP客户端
- js存储cookie与读取cookie
- Cookie.js源码笔记
- JS--中的 Cookie 与存储
- Cookie—客户端存储数据技术
- JS存储cookie读取cookie删除cookie详细用法
- JS之cookie验证
- JavaScript之客户端存储
- 将cocos2d-x-3.13打包成APK的解决方案
- PHP爬虫最全总结2-phpQuery,PHPcrawer,snoopy框架中文介绍
- [JS]笔记13之Date对象
- Socket进行数据传送的简单知识
- [JS]笔记14之事件委托
- [JS]笔记15之客户端存储cookie
- uri 获取bitmap图并压缩
- 202. Happy Number
- python input输入函数
- JAVA中常使用的获取时间方法和设置不同时间
- 使用Python教你秒搭本地服务器
- junit单元测试时,发现slf4j和activiti的动态部署jar冲突问题
- 关于oracle 临时表的使用
- 1号店订单系统水平分库的实践之路以及关键步骤