实例学习JavaScript读取和写入cookie


Posted in Javascript onJanuary 29, 2018

首先先让我们简单地了解一下cookie.

在我们制作网页的过程中,经常需要把信息从一个页面传递给另一个页面,这时候就需要用到JavaScript中的cookie机制了。简单说来,cookie提供了一种便捷的方式,能够在用户的计算机上保存少量数据并且远程获得它们,从而让网站可以保存一些细节信息,比如用户的习惯设置或是上一次访问网站的时间。cookie本身是一些短小的信息,能够由页面保存在用户的计算机上,然后被其他页面读取。cookie一般都设置为在一定时间后失效。

当然,cookie也有局限之处:浏览器对于能够保存的cookie数量有所限制,通常是几百个或者多一点。一般情况下,每个域名20个cookies是允许的,而每个域最多能保存4KB的cookie.除了大小限制可能导致的问题,也有很多原因会引起硬盘上的cookie消失,比如达到有效期限了,或是用户清理了cookie信息,或是换用了其他浏览器。因此,cookie不适合用来保存重要数据,在编写代码时也要考虑到cookie获取异常的处理方法。

在JavaScript中,使用document对象的cookie属性来储存和获取cookie.通常,document.cookie里的信息是由成对的名称和值组成的字符串,每一对数据的形式是:

name=value;

下面我们将通过一个简单的例子来展示在JavaScript中如何读取和写入cookie.

首先是createCookie.html,在该页面中会创建一个cookie,完整的代码如下:

<html>
<head>
  <title>createCookie</title>
  <script>
    function createCookie(){
      //get name and password
      var name = document.getElementById("name").value;
      var pwd = document.getElementById("pwd").value;
      //create cookie
      document.cookie = name+'|'+pwd;
      //go to showCookie.html page
      window.location.href = "showCookie.html";
    }
  </script>
</head>
<body>
  Userame:  <input id="name" type="text" /><br><br>
  Password:  <input id="pwd" type="password" /><br><br>
  <button onclick="createCookie()">Submit</submit>
</body>
</html>

该页面的截图如下:

实例学习JavaScript读取和写入cookie

点击submit按钮,就会创建一个cookie,在该cookie中保存了Username和Password信息,并且会跳转到showCookie.html页面。其中,showCookie.html页面的完整代码如下:

<html>
<head>
  <title>showCookie</title>
  <script>
    function showCookie(){
      //document.cookie is a string, using split() function to get cookie date in array form 
      var arr = document.cookie.split('|');
      //processing data in cookie
      var cookie_info = 'Data in cookie:<br>username is:  '+arr[0]+"<br>password is:  "+arr[1]+'<br>';
      //set content of element of id "res"
      document.getElementById("res").innerHTML = cookie_info;
    }
  </script>
</head>
<body>
  <button onclick="showCookie()">Show Cookie</button>
  <p id="res"></p>
</body>
</html>

页面截图如下:

实例学习JavaScript读取和写入cookie

点击show Cookie按钮就会显示cookie里面的信息了。

下面,我们将会在本地和服务器上分别跑这个程序,分别在IE浏览器和Chrome浏览器上运行这个程序,看看cookie的运行情况。

首先我们在本地运行这个程序,我们将上述两个文件都放在E盘中。先在IE浏览器上运行,在createCookie.html页面上输入信息,并点击submit按钮,截图如下:

实例学习JavaScript读取和写入cookie

跳转到showCookie.html页面后,点击show Cookie按钮,页面截图如下:

实例学习JavaScript读取和写入cookie

cookie在本地环境中的IE浏览器中运行正常。

接下来,我们看看在Chrome浏览器中运行情况,首先在Chrome浏览器中打开createCookie.html页面,输入信息,并点击submit按钮,截图如下:

实例学习JavaScript读取和写入cookie

跳转到showCookie.html页面后,点击show Cookie按钮,页面截图如下:

实例学习JavaScript读取和写入cookie

同样的程序,这次cookie在Chrome浏览器中却运行失败了。

接着让我们在服务器中运行这个程序,需要用到xampp,并打开Apache服务器,将上述两个html文件放在xampp安装文件夹下的htdocs文件夹下(具体的操作方法可以参考这篇博客:JavaScript之使用AJAX(适合初学者))。我们现在IE浏览器中运行该程序,在IE浏览器中输入网址:http://localhost/createCookie...:

实例学习JavaScript读取和写入cookie

点击Submit按钮,跳转到showCookie.html页面,并点击show Cookie按钮,截图如下:

实例学习JavaScript读取和写入cookie

然后我们在Chrome浏览器中输入网址:http://localhost/createCookie...:

实例学习JavaScript读取和写入cookie

点击Submit按钮,跳转到showCookie.html页面,并点击show Cookie按钮,截图如下:

实例学习JavaScript读取和写入cookie

这次在服务器环境下,IE浏览器和Chrome浏览器的cookie都运行正常!

Javascript 相关文章推荐
经常用到的JavasScript事件的翻译
Apr 09 Javascript
js中的preventDefault与stopPropagation详解
Jan 29 Javascript
JavaScript数据类型转换的注意事项
Jul 31 Javascript
Node.js测试中的Mock文件系统详解
Nov 21 Javascript
浅谈Node.js 子进程与应用场景
Jan 24 Javascript
Vue中render函数的使用方法
Jan 31 Javascript
微信小程序 JS动态修改样式的实现方法
Dec 16 Javascript
Vue项目服务器部署之子目录部署方法
May 12 Javascript
VUE DEMO之模拟登录个人中心页面之间数据传值实例
Oct 31 Javascript
vue路由传参的基本实现方式小结【三种方式】
Feb 05 Javascript
Nuxt的路由动画效果案例
Nov 06 Javascript
Javascript webpack动态import
Apr 19 Javascript
微信小程序之多文件下载的简单封装示例
Jan 29 #Javascript
JS中Object对象的原型概念基础
Jan 29 #Javascript
vue.js实现只弹一次弹框
Jan 29 #Javascript
javascript trie前缀树的示例
Jan 29 #Javascript
Vue官网todoMVC示例代码
Jan 29 #Javascript
jquery动态添加以及遍历option并获取特定样式名称的option方法
Jan 29 #jQuery
Angular2 父子组件通信方式的示例
Jan 29 #Javascript
You might like
php PDO中文乱码解决办法
2009/07/20 PHP
ThinkPHP标签制作教程
2014/07/10 PHP
ThinkPHP实现将SESSION存入MYSQL的方法
2014/07/22 PHP
PHP 前加at符合@的作用解析
2015/07/31 PHP
实例讲解php数据访问
2016/05/09 PHP
PHP屏蔽关键字实现方法
2016/11/17 PHP
Yii框架表单提交验证功能分析
2017/01/07 PHP
PHP实现查询手机归属地的方法详解
2017/04/28 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
PHP常量define和const的区别详解
2019/05/18 PHP
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
2011/08/23 Javascript
JavaScript实现的一个计算数字步数的算法分享
2014/12/06 Javascript
JavaScript去除数组里重复值的方法
2015/07/13 Javascript
jQuery实现Tab菜单滚动切换的方法
2015/09/21 Javascript
jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
2016/08/15 Javascript
深入浅析JS Function()构造函数
2016/08/22 Javascript
javascript 分号总结及详细介绍
2016/09/24 Javascript
完美的js图片轮换效果
2017/02/05 Javascript
React Native之ListView实现九宫格效果的示例
2017/08/02 Javascript
jQuery实现输入框的放大和缩小功能示例
2018/07/21 jQuery
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
2019/05/22 Javascript
layui 弹出层回调获取弹出层数据的例子
2019/09/02 Javascript
[54:51]Ti4 冒泡赛第二轮LGD vs C9 3
2014/07/14 DOTA
[05:36]DOTA2 2015国际邀请赛中国区预选赛第四日TOP10
2015/05/29 DOTA
[02:22]《新闻直播间》2017年08月14日
2017/08/15 DOTA
python通过加号运算符操作列表的方法
2015/07/28 Python
python异常处理和日志处理方式
2019/12/24 Python
浅谈Python中range与Numpy中arange的比较
2020/03/11 Python
python的数学算法函数及公式用法
2020/11/18 Python
日本高端护肤品牌:Tatcha
2016/08/29 全球购物
财务信息服务专业自荐书范文
2014/02/08 职场文书
求职简历自荐信
2014/06/18 职场文书
大学生档案自我鉴定(2篇)
2014/10/14 职场文书
2015年基层党组织公开承诺书
2015/01/21 职场文书
奇妙的 CSS shapes(CSS图形)
2021/04/05 HTML / CSS
Redis过期数据是否会被立马删除
2022/07/23 Redis