[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表 ...
随机推荐
- MFC的定时器OnTimer
本文总结来源出自鸡啄米,感谢鸡啄米.来源:http://www.jizhuomi.com/software/232.html 定时器简介 定时器,可以帮助开发者或者用户定时完成某项任务.在使用定时器时 ...
- BCP 数据的导入和导出
BCP 命令的参数很多,使用 -h 查看帮助信息,注意:参数是区分大小写的 使用BCP命令导出和导入数据常用的参数如下 bcp {[[database_name.][schema_name]].{ta ...
- es6学习笔记一数组（中）
接着上一篇,给大家再分享一些数组的其他方法.大家也可以去点击这里学习数组更多的方法 concat方法: 概述: concat() 方法将传入的数组或非数组值与原数组合并,组成一个新的数组并返回. ...
- IOS开发之简单音频播放器
今天第一次接触IOS开发的UI部分,之前学OC的时候一直在模拟的使用Target-Action回调模式,今天算是真正的用了一次.为了熟悉一下基本控件的使用方法,和UI部分的回调,下面开发了一个特别简易 ...
- C语言之链表
这两天在复习C语言的知识,为了给下个阶段学习OC做准备,以下的代码的编译运行环境是Xcode5.0版本,写篇博文把昨天复习的C语言有关链表的知识给大家分享一下,以下是小菜自己总结的内容,代码也是按照自 ...
- 如何用Python实现杨辉三角和心
1. 如何实现杨辉三角 import copy list=[] newlist=[] def Fibonacci(list,n): newlist.append(0) if n ==1: return ...
- 设计窘境：来自 Repository 的一丝线索，Domain Model 再重新设计
写在前面 阅读目录: 疑惑解读 设计窘境 一幅图的灵感 为嘛还是你-Repository 后记 上一篇<No zuo no die:DDD 应对具体业务场景,Domain Model 重新设计& ...
- 制作动画或小游戏——CreateJS事件（二）
在Canvas中如果要添加事件,就需要计算坐标来模拟各种事件,而EaselJS中已经封装好了多个事件,只需调用即可. 一.事件 1)点击 事件是绑定在Shape类中的,click事件与DOM中的意思是 ...
- 1Z0-053 争议题目解析681
1Z0-053 争议题目解析681 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 681.The environmental variable ORACLE-BASE is set ...
- (十八)WebGIS中清空功能和地图定位功能的设计以及实现
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 当地图中增加了很多元素后,对不同的元素需要进行一定的控制,最 ...