JS 中 cookie 的使用
1、cookie 是什么?
①、cookie 是存储于访问者计算机中的变量。每当一台计算机通过浏览器来访问某个页面时,那么就可以通过 JavaScript 来创建和读取 cookie。
②、实际上 cookie 是存于用户硬盘的一个文件,这个文件通常对应于一个域名,当浏览器再次访问这个域名时,便使这个cookie可用。因此,cookie可以跨越一个域名下的多个网页,但不能跨越多个域名使用。
③、不同浏览器对 cookie 的实现也不一样。即保存在一个浏览器中的 cookie 到另外一个浏览器是 不能获取的。
PS:cookie 和 session 都能保存计算机中的变量,但是 session 是运行在服务器端的,而客户端我们只能通过 cookie 来读取和创建变量
2、cookie 能做什么?
①、用户在第一次登录某个网站时,要输入用户名密码,如果觉得很麻烦,下次登录时不想输入了,那么就在第一次登录时将登录信息存放在 cookie 中。下次登录时我们就可以直接获取 cookie 中的用户名密码来进行登录。
PS:虽然 浏览器将信息保存在 cookie 中是加密了,但是可能还是会造成不安全的信息泄露
②、类似于购物车性质的功能,第一次用户将某些商品放入购物车了,但是临时有事,将电脑关闭了,下次再次进入此网站,我们可以通过读取 cookie 中的信息,恢复购物车中的物品。
PS:实际操作中,这种方法很少用了,基本上都是将这些信息存储在数据库中。然后通过查询数据库的信息来恢复购物车里的物品
③、页面之间的传值。在实际开发中,我们往往会通过一个页面跳转到另外一个页面。后端服务器我们可以通过数据库,session 等来传递页面所需要的值。但是在浏览器端,我们可以将数据保存在 cookie 中,然后在另外页面再去获取 cookie 中的数据。
PS:这里要注意 cookie 的时效性,不然会造成获取 cookie 中数据的混乱。
3、怎么使用 cookie?
①、语法
document.cookie = "name=value;expires=evalue; path=pvalue; domain=dvalue; secure;”
②、对各个参数的解释
一、name=value 必选参数
这是一个键值对,分别表示要存入的 属性 和 值。
比如:
document.cookie="name=中文";
//为了防止中文乱码,我们可以使用encodeURIComponent()编码;decodeURIComponent()解码
document.cookie = encodeURIComponent("name")+"="+encodeURIComponent("中文");
二、expires=evalue 可选参数
该对象的有效时间(可选)只支持GTM 标准时间,即要将时间转换,toUTCString()(默认为当前浏览器会话有用,关闭浏览器就消失);
比如:
var date = new Date();
date.setTime(date.getTime()+2000);//获取当前时间并加上 2 秒钟
//alert(date.toUTCString());//格林威治时间 (GMT) 把 Date 对象转换为字符串,并返回结果。
//alert(date.toGMTString());//与上面的结果一样,但是这个方法已经被上面取代了
document.cookie="name=vae;expires="+date.toUTCString();
alert(document.cookie); // name=vae
setTimeout(function(){alert(document.cookie)},4000);//4 秒后打印空的字符串
三、path=pvalue 可选参数
限制访问 cookie 的目录,默认情况下对于当前网页所在的同一目录下的所有页面有效
四、domain=dvalue 可选参数
用于限制只有设置了的域名才可以访问;如果没有设置,则默认在当前域名访问
比如设置 test*.com 表示域名为test*.com的服务器共享该Cookie
五、secure=true|false 可选参数,默认是 true 不安全传输
安全设置,指明必须通过 安全的通信通道来传输(https) 才能获得 cookie,true 不安全,默认值;false 安全,必须通过 https 来访问
比如:如果你设置 document.cookie = "name=vae;secure"
上面的代码如果是在 http 的协议中访问,那么是访问不了的
//设置 cookie
function setCookie(objName, objValue, objHours){//添加cookie
var str = objName + "=" + encodeURIComponent(objValue);
if (objHours > 0) {//为0时不设定过期时间,浏览器关闭时cookie自动消失
var date = new Date();
var ms = objHours * 3600 * 1000;
date.setTime(date.getTime() + ms);
str += "; expires=" + date.toUTCString();
}
document.cookie = str; }
//获取 cookie
function getCookie(objName){//获取指定名称的cookie的值
//多个cookie 保存的时候是以 ;空格 分开的
var arrStr = document.cookie.split("; ");
for (var i = 0; i < arrStr.length; i++) {
var temp = arrStr[i].split("=");
if (temp[0] == objName){
return decodeURIComponent(temp[1]);
}else{
return "";
} }
} //为了删除指定名称的cookie,可以将其过期时间设定为一个过去的时间
function delCookie(name){
var date = new Date();
date.setTime(date.getTime() - 10000);
document.cookie = name + "=a; expires=" + date.toUTCString();
}
注意:
(1)cookie可能被禁用。当用户非常注重个人隐私保护时,他很可能禁用浏览器的cookie功能;
(2)cookie是与浏览器相关的。这意味着即使访问的是同一个页面,不同浏览器之间所保存的cookie也是不能互相访问的;
(3)cookie可能被删除。因为每个cookie都是硬盘上的一个文件,因此很有可能被用户删除;
(4)cookie安全性不够高。所有的cookie都是以纯文本的形式记录于文件中,因此如果要保存用户名密码等信息时,最好事先经过加密处理。
(5)cookie 在保存时,只要后面保存的 name 相同,那么就会覆盖前面的 cookie,注意是完全覆盖,包括失效时间,path 等等
JS 中 cookie 的使用的更多相关文章
- js中cookie的使用
js中并没有封装好的存储cookie,取得cookie和删除cookie的函数,所以必须得自己手动处理,并且cookie中也只能存储字符串,不能存储数组等复杂的数据类型. // 添加cookie fu ...
- js中cookie操作
js中操作Cookie的几种常用方法 * cookie中存在域的概念,使用path和domain区分: * 在同一域中的set和del可以操作同一名称的cookie,但不在同一域中的情况下,则set无 ...
- js 中cookie 使用
一个系统有多种 角色, 每一种角色不同权限.后台请求的数据根据权限展示 ,所以要把权限保存在浏览器中. 首先 引入 在页面 <script type="text/javascript& ...
- jquery.cookie.js中$.cookie() 使用方法
定义:让网站服务器把少量数据储存到客户端的硬盘或内存,从客户端的硬盘读取数据的一种技术: 下载与引入:jquery.cookie.js基于jquery:先引入jquery,再引入:jquery.coo ...
- js中cookie的使用 以及缺点
什么是Cookie Cookie意为“甜饼”,是由W3C组织提出,最早由Netscape社区发展的一种机制.目前Cookie已经成为标准,所有的主流浏览器如IE.Netscape.Firefox. ...
- 易懂 易上手的cookie 最简单明了 js中cookie的使用方法及教程
今天项目中需要用到cookie 看到我的cookie不行了 大喊一声我曹 怎么可以这样 我就疯狂的在网上找 找啊 找 但是我感觉都太官方了 废话不说 看栗子 1.引入jQuery与jQuery.C ...
- js中cookie的使用详细分析
JavaScript中的另一个机制:cookie,则可以达到真正全局变量的要求. cookie是浏览器 提供的一种机制,它将document 对象的cookie属性提供给JavaScript.可以由J ...
- JS中cookie的基本使用
cookie是本身是HTML中ducument中的一个属性,可以用来保存一些简单的数据信息,比如用户名.密码等,提高一些网站的用户体验度.下面就来简单的说说cookie,它有下面几个特性: 1.有过期 ...
- 转:js中cookie的使用详细分析
cookie机制将信息存储于用户硬盘,因此可以作为全局变量,这是它最大的一个优点.它可以用于以下几种场合. (1)保存用户登录状态.例如将用户id存储于一个cookie内,这样当用户下次访问该页面时就 ...
随机推荐
- cinder存储节点 后端采用lvm、nfs安装配置
#cinder存储节点 openstack pike 部署 目录汇总 http://www.cnblogs.com/elvi/p/7613861.html #cinder存储节点 #cinder后端采 ...
- C#使用Xamarin开发可移植移动应用终章(11.获取设备信息与常用组件,开源一个可开发模版.)
前言 系列目录 C#使用Xamarin开发可移植移动应用目录 源码地址:https://github.com/l2999019/DemoApp 可以Star一下,随意 - - 说点什么.. 本系列,终 ...
- 如果Centos没有桌面,怎么修改IP地址
修改前备份!!! 修改前备份!!! 修改前备份!!! [PHP] 纯文本查看 复制代码 ? 1 vi /etc/sysconfig/network-scripts/ifcfg-eth0 编辑,输入以下 ...
- CentOS LNMP环境搭建 各版本
我们先下载系统包. 以下centos6.5 X64系统 进行演示.本环境适应Centos5.x CentOs6.x Centos7.x 32和64版本.如有错误请回复本文主要安装代码汇总 [PH ...
- javascript设计模式——发布订阅模式
前面的话 发布—订阅模式又叫观察者模式,它定义对象间的一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知.在javascript开发中,一般用事件模型来替代传统的发布—订阅模 ...
- RobotFramework自动化测试框架-移动手机自动化测试Element Attribute Should Match关键字的使用
Element Attribute Should Match 关键字用来判断元素的属性值是否和预期值匹配,该关键字接收四个参数[ locator | attr_name | match_pattern ...
- uva 12009 - Avaricious Maryanna(暴力)
option=com_onlinejudge&Itemid=8&category=516&page=show_problem&problem=3160" ta ...
- 中小企业为什么要上HR系统
人力资源不不过公司资源.也是一种社会资源. 越来越多的企业已将人作为一种重要的资源来看待,资金和技术则是其次.所以企业内部科学的全面的人力资源管理也因此处在了十分重要的位置上. 现在的人力资源是服务于 ...
- STL之list容器的实现框架
说明:本文仅供学习交流,转载请标明出处.欢迎转载! list的底层採用数据结构是环形的双向链表. 相对于vector容器.list容器插入和删除操作付出的代价要比vector容器小得多,可是list带 ...
- 支持国内版Office 365的PowerShell模块现已发布
作者:陈希章 发表于2017年5月12日 上一篇文章我详细介绍了如何在PowerShell中访问到Office 365的Graph API,在文章结尾处我留了一个问题,希望有朋友可以根据那个思路,尝试 ...