Cookie是网页开发中的一项重要技术，用于在本地存储一些信息（如username，password。登录状态）以便用户下一次訪问时使用（或在其他页面使用）。

cookie的格式是键值对，多个键值对之间以分号分隔。如 name=zhangsan;age=21

以下的代码演示内容：当用户点击确认button时。将把姓名和年龄存储在cookie中；当用户下一次訪问该页面时。将自己主动填写姓名和年龄。

注：必须把该html文件部署在webserver（如apache）上才干看到 cookie 的效果，直接放在本地用浏览器打开不行～

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta http-equiv="Content-Language" content="zh-cn" />

<title>Javascript Cookie应用</title>

<head>

  <style>

  body {background-color:#e6e6e6}

  </style>

</head>

<body onload = "autoFill()">

  <p>姓名<input type="text" id = "input_name"><p>

  <p>年龄<input type="text" id = "input_age"><p>

  <button onclick = "login()">确认</button>

  <script>

    //保存至cookie

    function login(){

      var username = document.getElementById("input_name").value;

      var age = document.getElementById("input_age").value;

      setCookie("ProUserName",username,7);

      setCookie("ProAge",age,7);

      alert("已保存至cookie.");

    }

    //读取cookie，自己主动填写输入框

    function autoFill(){

      document.getElementById("input_name").value=getCookie("ProUserName")

      document.getElementById("input_age").value=getCookie("ProAge")

    }

    //保存cookie, c_name = value, 有效期为 expiredays 天。

    function setCookie(c_name,value,expiredays){

      var exdate=new Date()

      exdate.setDate(exdate.getDate()+expiredays)

      document.cookie=c_name+ "=" +escape(value)+

        ((expiredays==null) ?

"" : ";expires="+exdate.toGMTString())

    }

    //读取key为 c_name 的 cookie.

    function getCookie(c_name){

      c_start=document.cookie.indexOf(c_name+"=")

      if (c_start!=-1){

        c_start=c_start + c_name.length+1

        c_end=document.cookie.indexOf(";",c_start)

        if (c_end==-1) {

          c_end=document.cookie.length

        }

        return unescape(document.cookie.substring(c_start,c_end))

      }

      return ""

    }

  </script>

</body>

</html>

Javascript：存储和读取cookie的更多相关文章

  1. 用javascript设置和读取cookie的例子

    请看下面用javascript设置和读取cookie的简单例子,现在的问题是,如果要设置的是一个cookie集,比如在cookie1集中有uname,uid两组信息,应该如何写呢?cookie(&qu ...

  2. php，javascript设置和读取cookie

    1.php设置cookie setcookie($name,$value,expire,path,domain,secrue); //$name:指的是cookie的名字:$value指的是cooki ...

  3. JavaScript 设置、读取Cookie

    1.设置Cookie //设置cookie function setCookie(cookieName, cookieValue, cookieExpires, cookiePath) { cooki ...

  4. JavaScript(第二十八天)【Cookie与存储】

    随着Web越来越复杂,开发者急切的需要能够本地化存储的脚本功能.这个时候,第一个出现的方案:cookie诞生了.cookie的意图是:在本地的客户端的磁盘上以很小的文件形式保存数据.   一．Cook ...

  5. mvc存储Cookie和读取Cookie方法

    mvc存储Cookie和读取Cookie方法: //存储 HttpCookie cookie = new HttpCookie("User"); System.Text.Encod ...

  6. 如何处理Cookie存储和读取中文乱码问题

    存储Cookie for(String str:books){ str=new String(str.getBytes("ISO-8859-1"),"utf-8" ...

  7. 原生JavaScript常用本地浏览器存储方法二(cookie)

    JavsScript Cookie概述 cookie是浏览器提供的一种机制,它将document对象的cookie属性提供给JavaScript.可以由JavaScript对其进行控制,而并不是Jav ...

  8. js的cookie写入存储与读取

    js的cookie写入存储与读取 在路径url截取需要的数据,存储到cookie里,读取成功并实现跳转. //写cookies 过期时间 2小时后 function setCookie(c_name, ...

  9. 运用JS设置cookie、读取cookie、删除cookie

    JavaScript是运行在客户端的脚本,因此一般是不能够设置Session的,因为Session是运行在服务器端的.而cookie是运行在客户端的,所以可以用JS来设置cookie. 假设有这样一种 ...

随机推荐

  1. 修改cloudera manager的端口号

    最近想在测试机装一个hadoop测试集群debug玩玩,然后就用cloudera manager装吧 这回使用rpm安装失败了,在网上搜到Cloudera Manager 5和CDH5离线安装说需要用 ...

  2. Units are seconds since 1970.

    在Android实际开发过程中常常会碰到以秒为单位的日期.这时能够依据须要将他们进行格式化处理,详细过程例如以下: long seconds=Long.parseLong("14058896 ...

  3. rac重新启动遭遇ORA-01078、ORA-01565、ORA-17503、ORA-12547

    今天測试环境server重新启动导致一个节点集群无法重新启动,遭遇ORA-12547错误.详细例如以下: server重新启动后,rac1集群无法启动,rac2正常启动: [root@rac1 ~]# ...

  4. 设计模式 - 组合模式(composite pattern) 迭代器(iterator) 具体解释

    组合模式(composite pattern) 迭代器(iterator) 具体解释 本文地址: http://blog.csdn.net/caroline_wendy 參考组合模式(composit ...

  5. vim 基础学习之文件跳转

    1. ''-当前文件上次跳转之前的位置2. '.-当前文件上次修改的位置,只要是发生了可能导致变化的命令操作就会被标记,哪怕实际结果没有变化3. '^-当前文件上次插入的位置,只要是发生了插入操作命令 ...

  6. 学习 shell —— 创建序列数组

    list/array 1. seq 方法创建 基本用法: $ a_num_seq = ($seq 5) $ echo $a_num_seq 1 2 3 4 5 a_num_seq 得到是字符串,不同之 ...

  7. export和source的区别

    1.执行脚本是在一个子shell环境运行的,脚本执行完后该子shell自动退出. 2.执行脚本中的系统环境变量(用export定义的变量)才会被复制到子shell中. 3.一个shell中的系统环境变 ...

  8. 水 hdu5208 2015-04-20 21:03 36人阅读 评论(0) 收藏

    题意: 选择数列中两个数,使得最大公约数最大 分析: 类似筛选法,因为数值不大,可以用b[i]计算i是多少个数的因子.最后取最大的i即可. #include <bits/stdc++.h> ...

  9. P2038 无线网络发射器选址

    题目描述 随着智能手机的日益普及,人们对无线网的需求日益增大.某城市决定对城市内的公共场所覆盖无线网. 假设该城市的布局为由严格平行的129 条东西向街道和129 条南北向街道所形成的网格状,并且相邻 ...

  10. input file HTML控件控制

    网页上添加一个input file HTML控件: 1 <input id="File1" type="file" /> 默认是这样的,所有文件类型 ...