[JS]笔记15之客户端存储cookie
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[JS]笔记15之客户端存储cookie相关的知识,希望对你有一定的参考价值。
-->本地存储发展情况
-->什么是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=函数1 32 //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;//没有返回false 48 } 49 console.log(getCookie(‘user2‘));//康康 50 console.log(getCookie(‘user6‘));//set;函,数9890=1 51 /*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的主要内容,如果未能解决你的问题,请参考以下文章