JavaScript创建、读取和删除cookie


Posted in Javascript onSeptember 03, 2019

Cookie 为 Web 应用程序保存用户相关信息提供了一种有用的方法。例如,当用户访问咱们的站点时,可以利用 Cookie 保存用户首选项或其他信息,这样,当用户下次再访问咱们的站点时,应用程序就可以检索以前保存的信息。

Cookie 是什么鬼

Cookie 是一小段文本信息,伴随着用户请求和页面在 Web 服务器和浏览器之间传递。用户每次访问站点时,Web 应用程序都可以读取 Cookie 包含的信息。

Cookie的出现是为了解决保存用户信息的问题。例如

当用户访问网页时,用户的名字可以存储在cookie中。
下次用户访问页面时,cookie会记住用户名。
Cookie 能在所有网页中记住用户的信息。它以字符串的形式包含信息,并键值对的形式保存的,即key=value的格式。各个cookie之间一般是以“;”分隔。

username = Daisy Green

Cookie 缺点

cookie可能被禁用。当用户非常注重个人隐私保护时,他很可能禁用浏览器的cookie功能;
cookie是与浏览器相关的。这意味着即使访问的是同一个页面,不同浏览器之间所保存的cookie也是不能互相访问的;
cookie可能被删除。因为每个cookie都是硬盘上的一个文件,因此很有可能被用户删除;
cookie安全性不够高。所有的cookie都是以纯文本的形式记录于文件中,因此如果要保存用户名密码等信息时,最好事先经过加密处理。

Cooke 工作方式

服务器以cookie的形式向访问者的浏览器发送一些数据。如果浏览器允许接受 cookie。 则将其作为纯文本记录存储在访问者的硬盘上。

JavaScript创建、读取和删除cookie

当访问者跳转到另一个页面时,浏览器会将相同的cookie发送到服务器进行检索。一旦检索到它,您的服务器就知道或记得以前存储了什么。

Cookie 的组成

Cookie 在HTTP的头部Header信息中,HTTP Set-Cookie的Header格式如下:

Set-Cookie: name=value; [expires=date]; [path=path];
[domain=domainname]; [secure];
在HTTP代码中一个具体的例子:

<meta http-equiv="set-cookie" content=" cookieName = cookieValue;
expires=01-Dec-2006 01:14:26 GMT; path=/" />
从上面的格式可以看出,Cookie由下面几部分组成。

Name/Value对

Name/Value由分号分隔,一个Cookie最多有20对,每个网页最多有一个Cookie,Value的长度不超过4K。对于Value值,最好用encodeURIComponent对其编码。

Domain

Domain域名也是Cookie的一部分,默认情况下,用户访问网页的域名会存放在Cookie中。如果设置了这个Cookie的域名值,那么意味着域名上的所有服务器,而不仅是你正在访问的服务器,都能访问这个Cookie,通常不要这样做。设置域名的格式如下:domain=http://xyz.com

path

设置对于特定的服务器来说哪个目录中的网页可访问Cookie,设置path的格式是:path = /movies

Expires

设置Cookie存活的时间,默认情况下,用户关闭浏览器则Cookie自动删除,如果没有设置Cookie失效的时间,那么用户关闭浏览器时Cookie也消失。如果设置该项,就能延长Cookie的生命期。设置时间在JS 中用Date对象的GMT形式,格式如下: expires = date.toGMTString()

Secure

取true或者false值。如果为true,那么必须通过https发送Cookie。

JS Cookie

在JS中,可以使用Document对象的cookie属性操作cookie。 JS 可以读取,创建,修改和删除当前网页的cookie,,来看看具体的骚操作。

创建 Cookie

JS可以使用document.cookie属性创建cookie,可以通过以下方式创建cookie:

document.cookie = "username=Daisy Green";
还可以添加有效日期(UTC 时间)。默认情况下,在浏览器关闭时会删除 cookie:

document.cookie = "username=Daisy Green; expires=Mon, 26 Aug 2019 12:00:00 UTC";
通过 path 参数,可以告诉浏览器 cookie 属于什么路径。默认情况下,cookie 属于当前页。

document.cookie = "username=Daisy Green; expires=Mon, 26 Aug 2019 12:00:00 UTC"; path=/";

读取 Cookie

通过 JS,可以这样读取 cookie:

var x = document.cookie;

document.cookie 会在一条字符串中返回所有 cookie,比如:cookie1=value; cookie2

事例:

<html>
  <head>  
   <script type = "text/javascript">
     <!--
      function ReadCookie() {
        var allcookies = document.cookie;
        document.write ("All Cookies : " + allcookies );
        
        // Get all the cookies pairs in an array
        cookiearray = allcookies.split(';');
        
        // Now take key value pair out of this array
        for(var i=0; i<cookiearray.length; i++) {
         name = cookiearray[i].split('=')[0];
         value = cookiearray[i].split('=')[1];
         document.write ("Key is : " + name + " and Value is : " + value);
        }
      }
     //-->
   </script>   
  </head>
  
  <body>   
   <form name = "myform" action = "">
     <p> click the Button to View Result:</p>
     <input type = "button" value = "Get Cookie" onclick = "ReadCookie()"/>
   </form>   
  </body>
</html>

运行:

JavaScript创建、读取和删除cookie

改变 cookie

通过使用 JS,咱们可以像创建 cookie 一样改变它:

document.cookie = "username=Steve Jobs; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";

这样旧 cookie 会被覆盖。

事例:

<html>
  <head>  
   <script type = "text/javascript">
     <!--
      function WriteCookie() {
        var now = new Date();
        now.setMonth( now.getMonth() + 1 );
        cookievalue = escape(document.myform.customer.value) + ";"
        
        document.cookie = "name=" + cookievalue;
        document.cookie = "expires=" + now.toUTCString() + ";"
        document.write ("Setting Cookies : " + "name=" + cookievalue );
      }
     //-->
   </script>   
  </head>
  
  <body>
   <form name = "myform" action = "">
     Enter name: <input type = "text" name = "customer"/>
     <input type = "button" value = "Set Cookie" onclick = "WriteCookie()"/>
   </form>   
  </body>
</html>

运行:

JavaScript创建、读取和删除cookie

删除 cookie

删除 cookie 非常简单,不必指定 cookie 值:直接把 expires 参数设置为过去的日期即可:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

应该定义 cookie 路径以确保删除正确的 cookie。如果不指定路径,有些浏览器不会让咱们删除 cookie。

事例:

<html>
  <head>  
   <script type = "text/javascript">
     <!--
      function WriteCookie() {
        var now = new Date();
        now.setMonth( now.getMonth() - 1 );
        cookievalue = escape(document.myform.customer.value) + ";"
        
        document.cookie = "name=" + cookievalue;
        document.cookie = "expires=" + now.toUTCString() + ";"
        document.write("Setting Cookies : " + "name=" + cookievalue );
      }
     //-->
   </script>   
  </head>
  
  <body>
   <form name = "myform" action = "">
     Enter name: <input type = "text" name = "customer"/>
     <input type = "button" value = "Set Cookie" onclick = "WriteCookie()"/>
   </form>   
  </body>
</html>

代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。

Javascript 相关文章推荐
写的htc的数据表格
Jan 20 Javascript
jquery 简单应用示例总结
Aug 09 Javascript
防止jQuery ajax Load使用缓存的方法小结
Feb 22 Javascript
js判断url是否有效的两种方法
Mar 04 Javascript
用window.onerror捕获并上报Js错误的方法
Jan 27 Javascript
AngularJs定制样式插入到ueditor中的问题小结
Aug 01 Javascript
WEB 前端开发中防治重复提交的实现方法
Oct 26 Javascript
基于Three.js插件制作360度全景图
Nov 29 Javascript
vue的diff算法知识点总结
Mar 29 Javascript
vue-cli2.x项目优化之引入本地静态库文件的方法
Jun 19 Javascript
vue前后分离调起微信支付
Jul 29 Javascript
Vue用mixin合并重复代码的实现
Nov 27 Vue.js
利用d3.js实现蜂巢图表带动画效果
Sep 03 #Javascript
JS/CSS实现字符串单词首字母大写功能
Sep 03 #Javascript
layui 根据后台数据动态创建下拉框并同时默认选中的实例
Sep 02 #Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
Sep 02 #Javascript
layui表格分页 记录勾选的实例
Sep 02 #Javascript
layui radio点击事件实现input显示和隐藏的例子
Sep 02 #Javascript
layui复选框的全选与取消实现方法
Sep 02 #Javascript
You might like
php 判断访客是否为搜索引擎蜘蛛的函数代码
2011/07/29 PHP
使用openssl实现rsa非对称加密算法示例
2014/01/24 PHP
浅谈PHP各环境下的伪静态配置
2019/03/13 PHP
Laravel框架Blade模板简介及模板继承用法分析
2019/12/03 PHP
jquery之Document元素选择器篇
2008/08/14 Javascript
解析js中获得父窗口链接getParent方法以及各种打开窗口的方法
2013/06/19 Javascript
JS localStorage实现本地缓存的方法
2013/06/22 Javascript
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
2014/12/20 Javascript
js实现进度条的方法
2015/02/13 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
2015/03/18 Javascript
flash+jQuery实现可关闭及重复播放的压顶广告
2015/04/15 Javascript
使用ajaxfileupload.js实现上传文件功能
2016/08/13 Javascript
更靠谱的H5横竖屏检测方法(js代码)
2016/09/13 Javascript
javascript数组遍历的方法实例分析
2016/09/13 Javascript
微信小程序自动客服功能
2017/11/02 Javascript
一步步教会你微信小程序的登录鉴权
2018/04/09 Javascript
Javascript 对象(object)合并操作实例分析
2019/07/30 Javascript
[43:26]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第二场 11.20
2020/11/23 DOTA
Python在线运行代码助手
2016/07/15 Python
Python通过matplotlib绘制动画简单实例
2017/12/13 Python
python如何读写csv数据
2018/03/21 Python
pandas 时间格式转换的实现
2019/07/06 Python
django中的图片验证码功能
2019/09/18 Python
python函数超时自动退出的实操方法
2020/12/28 Python
旅游管理实习自我鉴定
2013/09/29 职场文书
主题酒店策划书
2014/01/28 职场文书
优秀少先队辅导员先进事迹材料
2014/05/18 职场文书
运动会广播稿200米(5篇)
2014/10/15 职场文书
工作感想范文
2015/08/07 职场文书
初中地理教学反思
2016/02/19 职场文书
Python办公自动化之Excel(中)
2021/05/24 Python
只用20行Python代码实现屏幕录制功能
2021/06/02 Python
js实现自动锁屏功能
2021/06/02 Javascript
MySql 8.0及对应驱动包匹配的注意点说明
2021/06/23 MySQL
Anaconda安装pytorch和paddle的方法步骤
2022/04/03 Python
JavaScript正则表达式实现注册信息校验功能
2022/05/30 Java/Android