[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表 ...
随机推荐
- Cordova+Asp.net Mvc+GIS跨平台移动应用开发实战1-系统初步搭建（附演示,apk,全部源码）
1.前言 身处在移动互联网的今天,移动应用开发炙手可热,身为程序猿的我们怎么能错过开发一款我们自己的APP.本人算是一个基于.net的GIS开发入门者(马上就大四啦), 暑假在学校参加GIS比赛有大把 ...
- LINQ系列：LINQ to DataSet的DataView操作
1. 创建DataView EnumerableRowCollection<DataRow> expr = from p in products.AsEnumerable() orderb ...
- Entity Framework Code First执行SQL语句、视图及存储过程
1.Entity Framework Code First查询视图 Entity Framework Code First目前还没有特别针对View操作的方法,但对于可更新的视图,可以采用与Table ...
- C#设计模式系列：享元模式（Flyweight）
当频繁地从数据源读取数据时,读出的内容存在重复,那么需要使用享元模式(Flyweight)来提高内存效率,Flyweight模式将节省更多空间,共享的Flyweight越多,空间节省越大. 1.享元模 ...
- 前端编码风格规范之 JavaScript 规范
JavaScript 规范 全局命名空间污染与 IIFE 总是将代码包裹成一个 IIFE(Immediately-Invoked Function Expression),用以创建独立隔绝的定义域.这 ...
- 一款开源免费跨浏览器的视频播放器--videojs使用介绍
最近项目中的视频功能,需要做到浏览器全兼容,所以之前用html5实现的视频功能就需要进行改造了.在网上翻了个遍,试来试去,在所有的视频播放器中,就数它最实际了.首先我们来看看它的优点: 1.它是开源免 ...
- 用jekyll制作高大上的网站（二）——实际应用
最近公司要制作个文档库,直接就可以将jekyll应用到实际中. 模版使用了Jekyll Clean,这么模版相对内部简单一点,学习成本不会很大,而复杂的Minimal Mistakes就当作参考. 模 ...
- jQuery打造智能提示插件二（可编辑下拉框）
在上一篇 jQuery打造智能提示插件 上改进,增加下拉按钮,修复点击下拉区域外不隐藏BUG 效果 下拉按钮素材: js封装,注意红色部分为BUG修复,然后传入boxwidth不带px: /* /// ...
- Android之仿ele地图定位效果
PS:最近项目要求,希望在选择地址的时候能够仿ele来实现定位效果.因此就去做了一下.不过ele使用高德地图实现的,我是用百度地图实现的.没办法,公司说用百度那就用百度的吧.个人觉得高德应该更加的精准 ...
- X240 Win10企业版 14279版本 电池标尺白底问题
win10系统更新到14279版本: 电池标尺显示白底,而且右键也不可打开"启动电池管理器-" (1)首先安装lenovo settings 下载地址:http://think.l ...