[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设置、获取、删除及编码处理代码练习：
<!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]笔记15之客户端存储cookie的更多相关文章
- js笔记15
DOM2动态创建节点 1.生成节点的方法 document.createElement("div") 2.插入节点的方法 父元素.appendChild(新节点) 在父节点的子节点 ...
- 离线应用与客户端存储（cookie storage indexedDB）
离线检测 HTML5定义一个属性:navigator.onLine的属性.这个属性值为true,表示设备在线,值为false,表示设备离线.为了更好的确定网络是否可用,HTML5还定义了两个事件.这两 ...
- 客户端数据存储cookie、localStoeage、sessionStorage（小记）
一.数据存储分为客户端存储和服务端存储 1.而对于客户端存储,在html5以前只能通过cookie来实现:html 5以后增加了web存储(实际保存本地)的功能 (1)对于web存储有两个标准: ...
- JS创建和存储 cookie的一些方法
在js中cookie的操作与存储及清除cookie都与时间有关,我们只要把cookie过期时间进行有效的设置我们就可以控制它的存储了,下面我来给大家总结一下js中cookie的一些使用技巧 创建和存储 ...
- 漫谈客户端存储技术之Cookie篇
Cookie 说到Cookie,不管作为前端开发人员还是后端开发人员并不陌生,作为一种最古老.最稳定的客户端存储形式,即便是在当下各种新的客户端存储技术层出不穷的时代,它仍旧有其一席之位.Cookie ...
- HTML5学习笔记之客户端存储数据方法：localStorage(),sessionStorage()
HTML5提供了两种在客户端存储数据的新方法: localStorage():没有时间限制的数据存储 sessionStorage():针对一个session的数据存储 下面的一个例子用localSt ...
- JavaScript的客户端存储
一.前言: 客户端存储实际上就是Web浏览器的记忆功能,通过浏览器的API实现数据存储到硬盘: 二.存储的不同形式: 1.Web存储:localStorage 和 sessionStorage 代表同 ...
- 【读书笔记】HTML5 Web存储
PS:这里讲web存储,主要是在客户端存储的一些技术:cookie,localstorage,sessionstorage,WebSQL. Cookie Cookie是HTML4中在客户端 ...
- js023-离线应用与客户端存储
js023-离线应用与客户端存储 本章内容: 进行离线检测 使用离线缓存 在浏览器中保存数据 23.1 离线检测 第一步:知道设备是在线还是离线:navigator.Online属性.该值为true表 ...
随机推荐
- Security6：授予权限的思路和一般步骤
思路是:Grants permissions on a securable to a principal. The general concept is to GRANT <some permi ...
- MindManger 2016 64位 破解版
下载地址:http://pan.baidu.com/s/1mi7xkIO 如果失效请去 “毒逆天吧” 发个求助帖即可就有人补上
- Visual Studio中没有为此解决方案配置选中要生成的项目
问题: Visual Studio点击"生成解决方案"时,出现"没有为此解决方案配置选中要生成的项目". 解决方法: 菜单->生成->配置管理器-& ...
- 静态Include和动态Include测试并总结
主要代码 hjzgg.css .center-div{ width:auto; margin-left: 40%; margin-right: 40%; display: block; positio ...
- 快速搭建php环境
WAMP:在windows系统下搭建PHP开发环境 APPSERVER: 两种可用于开发环境的,一般用WAMP LAMP构架 Linux系统 Apache服务器管理软件 Mysql数据库 php语言 ...
- 搞清arguments,callee,caller
arguments是什么? arguments是函数调用时,创建的一个类似的数组但又不是数组的对象,并且它存储的是实际传递给函数的参数,并不局限于函数声明的参数列表哦. 尼玛,什么意思? 写个demo ...
- MySQL学习笔记一：常用显示命令
1.开启和关闭MySQL服务 WIN平台:NET START MYSQL55 :NET STOP MYSQL55 Linux平台:service mysql start : service mysql ...
- linux中断与异常
看了<深入理解linux内核>的中断与异常,简单总结了下,如果有错误,望指正! 一 什么是中断和异常 异常又叫同步中断,是当指令执行时由cpu控制单元产生的,之所以称之为异常,是因为只有在 ...
- MySQL线程池
MySQL线程池只在Percona,MariaDB,Oracle MySQL企业版中提供.Oracle MySQL社区版并不提供. 在传统方式下,MySQL线程调度方式有两种:每个连接一个线程(one ...
- 什么是Node？Node环境配置
什么是Node? Node.js 不是JS文件也不是一个JS框架,而是一个Server side JavaScript runtime(服务端的一个JS运行时),我们可以Node环境中运行JS代码 ...