实例学习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 页面自动加载函数(兼容多浏览器)
May 18 Javascript
javascript模拟select,jselect的方法实现
Nov 08 Javascript
express的中间件cookieParser详解
Dec 04 Javascript
JavaScript中的类数组对象介绍
Dec 30 Javascript
JavaScript实现快速排序的方法
Jul 31 Javascript
JavaScript实现表格快速变色效果代码
Aug 19 Javascript
Bootstrap框架下下拉框select搜索功能
Mar 26 Javascript
详解js前端代码异常监控
Jan 11 Javascript
js操作浏览器的参数方法
Jan 21 Javascript
JavaScript 九种跨域方式实现原理
Feb 11 Javascript
Vue模板语法中数据绑定的实例代码
May 17 Javascript
解析JS在获取当前月的最后一天遇到的坑
Aug 30 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
ubuntu 编译安装php 5.3.3+memcache的方法
2010/08/05 PHP
PHP插入排序实现代码
2013/04/04 PHP
PHP生成唯一订单号
2015/07/05 PHP
解析WordPress中函数钩子hook的作用及基本用法
2015/12/22 PHP
Zend Framework框架之Zend_Mail实现发送Email邮件验证功能及解决标题乱码的方法
2016/03/21 PHP
PHP递归遍历多维数组实现无限分类的方法
2016/05/06 PHP
页面js遇到乱码问题的解决方法是和无法转码的情况
2014/04/30 Javascript
Jquery方式获取iframe页面中的 Dom元素
2014/05/07 Javascript
JavaScript实现SHA-1加密算法的方法
2015/03/11 Javascript
JavaScript 字符串常用操作小结(非常实用)
2016/11/30 Javascript
简单理解js的prototype属性及使用
2016/12/07 Javascript
Easyui ueditor 整合解决不能编辑的问题(推荐)
2017/06/25 Javascript
JS路由跳转的简单实现代码
2017/09/21 Javascript
input 标签实现输入框带提示文字效果(两种方法)
2017/10/09 Javascript
JavaScript原生实现观察者模式的示例
2017/12/15 Javascript
去掉vue 中的代码规范检测两种方法(Eslint验证)
2018/03/21 Javascript
vue实现多组关键词对应高亮显示功能
2019/07/25 Javascript
微信小程序实现蓝牙打印
2019/09/23 Javascript
JS实现打砖块游戏
2020/02/14 Javascript
Webpack中SplitChunksPlugin 配置参数详解
2020/03/24 Javascript
vue中用 async/await 来处理异步操作
2020/07/18 Javascript
vue实现简易图片左右旋转,上一张,下一张组件案例
2020/07/31 Javascript
详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别
2020/08/12 Javascript
解决Antd 里面的select 选择框联动触发的问题
2020/10/24 Javascript
python 实现A*算法的示例代码
2018/08/13 Python
python默认参数调用方法解析
2020/02/09 Python
浅谈keras中自定义二分类任务评价指标metrics的方法以及代码
2020/06/11 Python
解决python便携版无法直接运行py文件的问题
2020/09/01 Python
CSS3实现王者匹配时的粒子动画效果
2019/04/12 HTML / CSS
学校联谊活动方案
2014/02/15 职场文书
投标承诺函范文
2015/01/21 职场文书
打架检讨书
2015/01/27 职场文书
不同意离婚代理词
2015/05/23 职场文书
党员转正党支部意见
2015/06/02 职场文书
iPhone13再次曝光
2021/04/15 数码科技
Go语言的协程上下文的几个方法和用法
2022/04/11 Golang