实例学习JavaScript读取和写入cookie

首先先让我们简单地了解一下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>

该页面的截图如下：

点击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>

页面截图如下：

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

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

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

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

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

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

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

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

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

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

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

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

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

您可能感兴趣的文章:

  • 原生js+cookie实现购物车功能的方法分析
  • JS写XSS cookie stealer来窃取密码的步骤详解
  • jQuery结合jQuery.cookie.js插件实现换肤功能示例
  • JSP的Cookie在登录中的使用
  • Angularjs cookie 操作实例详解
  • 基于js中document.cookie全面解析
  • 原生JS 购物车及购物页面的cookie使用方法
  • PHP与JavaScript针对Cookie的读写、交互操作方法详解
  • javascript cookie的基本操作（添加和删除）
  • JS 设置Cookie 有效期 检测cookie
赞 (0)

相关推荐

  • jQuery结合jQuery.cookie.js插件实现换肤功能示例

    本文实例讲述了jQuery结合jQuery.cookie.js插件实现换肤功能.分享给大家供大家参考,具体如下: 上一次和大家分享了如何实现换肤功能,但是script代码好像有点长,所以这次打算使用cookie.js插件来实现换肤功能,好啦,我们开始吧. jQuery.cookie.js下载:https://github.com/carhartl/jquery-cookie/ 先来了解下cookie.js如何使用. 先导入: <script type="text/javascript&qu

  • JSP的Cookie在登录中的使用

    JSP的Cookie在登录中的使用

    JSP的Cookie在登录中的使用 一 功能需求 实现记忆用户名和密码功能. 二 代码 1.login.jsp <%@ page language="java" import="java.util.*,java.net.*" contentType="text/html; charset=utf-8"%> <% String path = request.getContextPath(); String basePath = r

  • 原生JS 购物车及购物页面的cookie使用方法

    直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>购物页面</title> <style> ul{list-style:none;padding:0;margin:0;} .goods li{display:inline-block;border:1px solid #ddd;pa

  • JS写XSS cookie stealer来窃取密码的步骤详解

    JS写XSS cookie stealer来窃取密码的步骤详解

    JavaScript是web中最常用的脚本开发语言,js可以自动执行站点组件,管理站点内容,在web业内实现其他有用的函数.JS可以有很多的函数可以用做恶意用途,包括窃取含有密码等内容的用户cookie. Cookie是站点请求和保持特定访问页面的信息.Cookie含有访问的方式.时间.用户名密码等认证信息等.当用户访问给定站点时,必须使用cookie:如果攻击者可以拦截cookie,就可以利用cookie窃取用户的一些信息.对某个特定的域名,使用JS可以保存或修改用户的cookie.也就是说,

  • 原生js+cookie实现购物车功能的方法分析

    本文实例讲述了原生js+cookie实现购物车功能的方法.分享给大家供大家参考,具体如下: 这里使用js+cookie实现简单的购物车功能. 首先是简单的HTML结构,只是为了演示下功能. <ul> <li><span>a0001</span><span>shdfi</span><span>￥98.00</span> <input type="button" value="加

  • 基于js中document.cookie全面解析

    什么是cookie? cookie 是存储于访问者的计算机中的变量.每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie.你可以使用 JavaScript 来创建和取回 cookie 的值. 设置cookie 每个cookie都是一个名/值对,可以把下面这样一个字符串赋值给document.cookie: document.cookie="userId=828"; document.cookie看上去就像一个属性,可以赋不同的值.但它和一般的属性不一样,改变它的赋值并不

  • JS 设置Cookie 有效期 检测cookie

    设置cookie 函数直接上代码: function setCookie(name, value, days) { //设置cookie var d = new Date(); d.setTime(d.getTime() + (days * 24 * 60 * 60 * 1000)); var expires = "expires=" + d.toUTCString(); document.cookie = name + "=" + value + ";

  • Angularjs cookie 操作实例详解

    Angularjs cookie 操作实例详解

    摘要 现在很多app采用内嵌h5的方式进行开发,有些数据会存在webveiw的cookie中,那么如果使用angularjs开发单页应用,就需要用到angularjs的cookie操作.这里提供一个简单的学习demo.方便快速上手. 一个例子 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ng-app="myapp"> <head> <meta http

  • javascript cookie的基本操作（添加和删除）

    javascript cookie的基本操作(添加和删除) 1.添加一个cookie:response.addCookie(Cookie c); 2.获取cookie集合: request.getCookies(); 3.新建一个cookie: new Cookie(String name,String value) - Cookie在构造的时候就需要设定好cookie的名字和值 4.获取cookie的名字:cookie.getName(); 5.获取cookie的值:cookie.getVal

  • PHP与JavaScript针对Cookie的读写、交互操作方法详解

    本文实例讲述了PHP与JavaScript针对Cookie的读写.交互操作方法.分享给大家供大家参考,具体如下: 下面的例子列出几种情形交互场景,列出JS和php交互的方法.总结下,以免日后再为cookie问题困扰. <?php setcookie('php_cn_ck','php_中文_cookie'); setcookie('php_en_ck','php_english_cookie'); ?> <script src="cookie.js"></s

随机推荐