[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的主要内容,如果未能解决你的问题,请参考以下文章

php学习笔记-会话控制简单介绍session和cookie

PHP系列(十三)PHP会话控制

原生JavaScript第七篇

JS设置读取删除cookie及表单交互

客户端存储之HTML5 web存储

js之存储