[JS]笔记15之客户端存储cookie
2016-09-10 22:30
288 查看
-->本地存储发展情况
-->什么是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设置、获取、删除及编码处理代码练习:
效果笔记:https://www.cnblogs.com/duenyang/
-->什么是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设置、获取、删除及编码处理代码练习:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>setCookie&getCookie&rmCookie</title> </head> <body> <h1 id="con">注!!在服务器中打开看效果</h1> <script> /*cookie设置*/ var con=document.getElementById('con'); document.cookie='user1=喽喽'; document.cookie='user2=康康'; document.cookie='user3=YY'; document.cookie='user4=QQ'; //设置有效期 var dates=new Date(); dates.setDate(dates.getDate()+7); document.cookie='user1=小楼欧;expires='+dates; /*setCookie-设置cookie值--封装函数*/ function setCookie(key,val,Days){ var dates=new Date(); dates.setDate(dates.getDate()+Days); document.cookie=key+'='+escape(val)+';expires='+dates; } setCookie('user5','set函数1',20); setCookie('user6','set;函,数9890=1',20); /*cookie读取*/ //1、一次获取所有的cookie值 var cookies=document.cookie; console.log(cookies);//user=YY; user2=康康; user3=YY; user4=QQ; user1=小楼欧; user5=函数1 //2、必须自己解析这个字符串,来获取指定的cookie值 var arr=cookies.split('; '); console.log(arr);//["user=YY", "user2=康康", "user3=YY", "user4=QQ", "user1=小楼欧", "user5=函数1"] var arr2=arr[4].split('='); console.log(arr2);//["user1", "小楼欧"] console.log(arr2[1]);//小楼欧 /*getCookie--获取cookie值--封装函数*/ function getCookie(key){ var arr=document.cookie.split('; ');//获取所有的cookie值 for (var i = 0; i < arr.length; i++) { var arr2=arr[i].split('=');//["user1", "小楼欧"] if (arr2[0]==key) { return unescape(arr2[1]); } } return false;//没有返回false } console.log(getCookie('user2'));//康康 console.log(getCookie('user6'));//set;函,数9890=1 /*rmCookie--删除cookie--封装函数*/ var date2=new Date(); date2.setDate(date2.getDate()-1); document.cookie='user4=11;expires='+date2; function rmCookie(key){ setCookie(key,'0',-1); } rmCookie('user2'); </script> </body> </html>
效果笔记:https://www.cnblogs.com/duenyang/
相关文章推荐
- 【js学习笔记-104】-----客户端存储cookie
- Web客户端数据存储学习笔记——Cookie
- PHP学习笔记【26】--客户端存储技术Cookie
- js基础-客户端存储(Cookie、Storage、IndexedDB)
- PHP学习笔记【26】--客户端存储技术Cookie
- JS高级程序设计-客户端检测-笔记
- JS笔记:检测客户端(引擎、浏览器、平台、操作系统)
- javascript学习笔记(七)利用javascript来创建和存储cookie
- SilverLight学习笔记--本地(客户端)数据存储
- 解决js存储中文cookie乱码问题
- javascript js cookie的存储,获取和删除
- 客户端网络pomelo学习笔记 (3) node.js 与 c 客户端 Diffie-Hellman 密钥交换算法的实现客户端网络
- 学习altas笔记[客户端JS和Altas环境初始化关系和DataTable返回数据的客户端处理]
- [转]javascript js cookie的存储,获取和删除
- 原生js--客户端存储的种类
- js学习笔记——客户端js学习要点
- js建立,显示cookie一些笔记
- javascript js cookie的存储,获取和删除
- JavaScript高级程序设计 客户端存储学习笔记
- 【js学习笔记-075】-----客户端javascript线程模型