[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表 ...
随机推荐
- MVC4做网站后台:栏目管理1、添加栏目-续
栏目类型跟原来一样分为常规栏目.单页栏目和外部链接.根据栏目类型的不同要隐藏相应的表单和验证(服务器端验证).另外一个是父栏目必须是常规栏目才行,easyui-combotree要用到树形json数据 ...
- Activity四种启动模式
转载博客:http://blog.csdn.net/shinay/article/details/7898492 Activity启动方式有四种,分别是:standardsingleTopsingle ...
- ASP.NET Core的配置（4）：多样性的配置来源[上篇]
较之传统通过App.config和Web.config这两个XML文件承载的配置系统,ASP.NET Core采用的这个全新的配置模型的最大一个优势就是针对多种不同配置源的支持.我们可以将内存变量.命 ...
- Objective-C中小怪兽的逻辑
学习Objective-C的面向对象也有一段时间了,为了犒劳自己的学习成果,写个小怪兽来犒劳一下自己把.在LOL中有怪兽和英雄的角色吧,接下来就先写一个小怪兽的类吧.从小怪兽的角度来讲,怪兽都有那些行 ...
- 1Z0-053 争议题目解析520
1Z0-053 争议题目解析520 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 520.Which of the following are not disabled by de ...
- selenium操作隐藏的元素
有时候我们会碰到一些元素不可见,这个时候selenium就无法对这些元素进行操作了.例如,下面的情况: Python 页面主要通过“display:none”来控制整个下拉框不可见.这个时候如果直接操 ...
- Android之ListView的getItemViewType和getViewTypeCount
PS:感觉这两个方法其实还是很容易理解的,也算是给我其他两个朋友写的吧,帮他们搞清楚这两个方法的用法和概念.同时还有一些小细节问题需要注意. 学习内容: 1.getItemViewType和getVi ...
- [AngularJS] AngularJS系列(6) 中级篇之ngResource
目录 $http ngResource $http几乎是所有ng开发中,都会用到的服务.本节将重点说下$http 与 ngResource $http 使用:$http(config); 参数: me ...
- 【菜鸟玩Linux开发】通过MySQL自动同步刷新Redis
在服务端开发过程中,一般会使用MySQL等关系型数据库作为最终的存储引擎,Redis其实也可以作为一种键值对型的数据库,但在一些实际场景中,特别是关系型结构并不适合使用Redis直接作为数据库.这俩家 ...
- 创建ASP.NET Core MVC应用程序(2)-利用MySQL Connector NET连接到MySQL
创建ASP.NET Core MVC应用程序(2)-利用MySQL Connector NET连接到MySQL 用惯.NET的研发人员都习惯性地使用SQLServer作为数据库.然而.NET Core ...