实例学习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 相关文章推荐
js apply/call/caller/callee/bind使用方法与区别分析
Oct 28 Javascript
js实现点小图看大图效果的思路及示例代码
Oct 28 Javascript
jQuery找出网页上最高元素的方法
Mar 20 Javascript
javascript简单实现滑动菜单效果的方法
Jul 27 Javascript
基于JS+Canves实现点击按钮水波纹效果
Sep 15 Javascript
浅谈jQuery添加的HTML,JS失效的问题
Oct 05 Javascript
javascript中setAttribute兼容性用法分析
Dec 12 Javascript
JavaScript实现三级联动菜单实例代码
Jun 26 Javascript
Angular4表单验证代码详解
Sep 03 Javascript
解决layui中table异步数据请求不支持自定义返回数据格式的问题
Aug 19 Javascript
Vue 权限控制的两种方法(路由验证)
Aug 16 Javascript
JS中队列和双端队列实现及应用详解
Sep 29 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 ajax 静态分页过程形式
2011/09/02 PHP
php像数组一样存取和修改字符串字符
2014/03/21 PHP
PHP中strtr字符串替换用法详解
2014/11/26 PHP
浅析PHP7 的垃圾回收机制
2019/09/06 PHP
php实现登录页面的简单实例
2019/09/29 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
Javascript(AJAX)解析XML的代码(兼容FIREFOX/IE)
2010/07/11 Javascript
js跨域问题之跨域iframe自适应大小实现代码
2010/07/17 Javascript
使用jquery实现select添加实现后台权限添加的效果
2011/05/28 Javascript
Web跨浏览器进程通信(Web跨域)
2013/04/17 Javascript
ie9 提示'console' 未定义问题的解决方法
2014/03/20 Javascript
javascript的document.referrer浏览器支持、失效情况总结
2014/07/18 Javascript
简单的jQuery入门指引
2015/07/28 Javascript
Node.js实用代码段之正确拼接Buffer
2016/03/17 Javascript
jQuery实现右键菜单、遮罩等效果代码
2016/09/27 Javascript
简单实现js拖拽效果
2017/07/25 Javascript
基于JS递归函数细化认识及实用实例(推荐)
2017/08/07 Javascript
了解JavaScript中的选择器
2019/05/24 Javascript
vuex 中插件的编写案例解析
2019/06/10 Javascript
[07:47]DOTA2国际邀请赛采访专栏:探访Valve总部
2013/08/08 DOTA
Python多线程编程(四):使用Lock互斥锁
2015/04/05 Python
利用Python绘制数据的瀑布图的教程
2015/04/07 Python
Python爬取国外天气预报网站的方法
2015/07/10 Python
python 写的一个爬虫程序源码
2016/02/28 Python
python实现屏保计时器的示例代码
2018/08/08 Python
win7 x64系统中安装Scrapy的方法
2018/11/18 Python
python树的同构学习笔记
2019/09/14 Python
Html5移动端网页端适配(js+rem)
2021/02/03 HTML / CSS
入党自我鉴定
2014/03/25 职场文书
个人租房协议书
2014/04/09 职场文书
药剂专业个人求职信范文
2014/04/29 职场文书
法语专业求职信
2014/07/20 职场文书
2015年乡镇党务公开工作总结
2015/05/19 职场文书
幼儿园毕业典礼园长致辞
2015/07/29 职场文书
数据库连接池
2021/04/06 MySQL
python实战之90行代码写个猜数字游戏
2021/04/22 Python