实例学习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 相关文章推荐
jQuery Autocomplete自动完成插件
Jul 17 Javascript
bootstrap data与jquery .data
Jul 07 Javascript
微信小程序 教程之WXSS
Oct 18 Javascript
浅谈js中几种实用的跨域方法原理详解
Dec 02 Javascript
Vue 滚动行为的具体使用方法
Sep 13 Javascript
微信小程序获取手机号授权用户登录功能
Nov 09 Javascript
在vue中使用jointjs的方法
Mar 24 Javascript
如何解决React官方脚手架不支持Less的问题(小结)
Sep 12 Javascript
es6数据变更同步到视图层的方法
Mar 04 Javascript
vue中使用vee-validator完成表单校验方案
Nov 01 Javascript
Echarts在Taro微信小程序开发中的踩坑记录
Nov 09 Javascript
vue从后台渲染文章列表以及根据id跳转文章详情详解
Dec 14 Vue.js
微信小程序之多文件下载的简单封装示例
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初学者的8点有效建议
2010/11/20 PHP
一个PHP的ZIP压缩类分享
2014/05/04 PHP
Linux下PHP安装mcrypt扩展模块笔记
2014/09/10 PHP
PHP实现检测客户端是否使用代理服务器及其匿名级别
2015/01/07 PHP
Yii2框架数据库简单的增删改查语法小结
2016/08/31 PHP
php事件驱动化设计详解
2016/11/10 PHP
JQuery 图片滚动轮播示例代码
2014/03/24 Javascript
js判断浏览器版本以及浏览器内核的方法
2015/01/20 Javascript
jQuery插件datepicker 日期连续选择
2015/06/12 Javascript
用js编写的简单的计算器代码程序
2015/08/04 Javascript
javascript高级编程之函数表达式 递归和闭包函数
2015/11/29 Javascript
AngularJS 日期格式化详解
2015/12/23 Javascript
js判断图片加载完成后获取图片实际宽高的方法
2016/02/25 Javascript
功能强大的Bootstrap使用手册(一)
2016/08/02 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
2017/03/06 Javascript
简单实现jQuery上传图片显示预览功能
2020/06/29 jQuery
vue使用mint-ui实现下拉刷新和无限滚动的示例代码
2017/11/06 Javascript
React Navigation 使用中遇到的问题小结
2018/05/08 Javascript
js动态获取时间的方法分析
2019/08/02 Javascript
Angular 中使用 FineReport不显示报表直接打印预览
2019/08/21 Javascript
layui lay-verify form表单自定义验证规则详解
2019/09/18 Javascript
微信小程序获取地理位置及经纬度授权代码实例
2019/09/18 Javascript
对pandas replace函数的使用方法小结
2018/05/18 Python
利用python实现简易版的贪吃蛇游戏(面向python小白)
2018/12/30 Python
使用python itchat包爬取微信好友头像形成矩形头像集的方法
2019/02/21 Python
python实现接口并发测试脚本
2019/06/25 Python
解决pycharm启动后总是不停的updating indices...indexing的问题
2019/11/27 Python
Python enumerate函数遍历数据对象组合过程解析
2019/12/11 Python
解决pycharm上的jupyter notebook端口被占用问题
2019/12/17 Python
如何基于python对接钉钉并获取access_token
2020/04/21 Python
爱情保证书范文
2014/02/01 职场文书
青春无悔演讲稿
2014/05/08 职场文书
机械设计及其自动化专业求职信
2014/06/09 职场文书
2016幼儿园毕业感言
2015/12/08 职场文书
高三生物教学反思
2016/02/22 职场文书
Vue.js中v-for指令的用法介绍
2022/03/13 Vue.js