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

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

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

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

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3.  
  4. <html>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <meta http-equiv="Content-Language" content="zh-cn" />
  7.  
  8. <title>Javascript Cookie应用</title>
  9. <head>
  10.   <style>
  11.   body {background-color:#e6e6e6}
  12.   </style>
  13. </head>
  14.  
  15. <body onload = "autoFill()">
  16.   <p>姓名<input type="text" id = "input_name"><p>
  17.   <p>年龄<input type="text" id = "input_age"><p>
  18.   <button onclick = "login()">确认</button>
  19.  
  20.   <script>
  21.     //保存至cookie
  22.     function login(){
  23.       var username = document.getElementById("input_name").value;
  24.       var age = document.getElementById("input_age").value;
  25.       setCookie("ProUserName",username,7);
  26.       setCookie("ProAge",age,7);
  27.  
  28.       alert("已保存至cookie.");
  29.     }
  30.  
  31.     //读取cookie，自己主动填写输入框
  32.     function autoFill(){
  33.       document.getElementById("input_name").value=getCookie("ProUserName")
  34.       document.getElementById("input_age").value=getCookie("ProAge")
  35.     }
  36.  
  37.     //保存cookie, c_name = value, 有效期为 expiredays 天。
  38.     function setCookie(c_name,value,expiredays){
  39.       var exdate=new Date()
  40.       exdate.setDate(exdate.getDate()+expiredays)
  41.       document.cookie=c_name+ "=" +escape(value)+
  42.         ((expiredays==null) ?
  43.  
  44. "" : ";expires="+exdate.toGMTString())
  45.     }
  46.  
  47.     //读取key为 c_name 的 cookie.
  48.     function getCookie(c_name){
  49.       c_start=document.cookie.indexOf(c_name+"=")
  50.       if (c_start!=-1){
  51.         c_start=c_start + c_name.length+1
  52.         c_end=document.cookie.indexOf(";",c_start)
  53.         if (c_end==-1) {
  54.           c_end=document.cookie.length
  55.         }
  56.         return unescape(document.cookie.substring(c_start,c_end))
  57.       }
  58.  
  59.       return ""
  60.     }
  61.   </script>
  62.  
  63. </body>
  64. </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. NOIP 2012 疫情控制（二分+贪心+倍增）

    题解 二分时间 然后一个显然的事是一个军队向上爬的越高它控制的点越多 所以首先军队尽量往上爬. 当一个军队可以爬到根节点我们记录下它的剩余时间T和它到达根结点时经过的根节点的子节点son. 当一个军队 ...

  2. Java 异常的捕获与处理详解（二）

    (一).throws关键字 throws关键字主要是在定义上使用的,表示的是此方法中不进行异常处理,而交给被调用处处理. 例如: class MyMath { public int div(int x ...

  3. ifreq、ifconf

    网络相关的ioctl请求的request参数及arg地址必须指向的数据类型如下表所示: 接口 SIOCGIFCONF SIOCSIFADDR SIOCGIFADDR SIOCSIFBRDADDR SI ...

  4. ArcGIS api for javascript——创建地图

    描述 这个示例显示ArcGIS Server的一个地图.ArcGIS Server地图是缓存的,意味着它有服务器管理员建来提升性能的一组预先渲染的切片.由于这个原因地图通过ArcGISTiledMap ...

  5. myeclipse2013 jsp编辑初始化

    首先,大家可能有过这种经历.双击打开jsp编辑.它默认会打开视图,这样就使人恼火了,卡死了.所以我们能够自己设jsp的默认打开方式:打开Window-->preferences得: 搜索edit ...

  6. html5缓存

    HTML5 提供了两种在client存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 这些都是由 coo ...

  7. ORA-01555错误总结（二）

    这篇文章紧接着上一篇"ORA-01555错误总结(一)".主要描写叙述延迟块清除导致的ORA-01555错误. 以下是一些简介(上一遍已经介绍过) ORA-01555错误是一种在o ...

  8. spring IOC --- 控制反转（依赖注入）----简单的实例

    IoC(Inversion of Control)控制反转,对象创建责任的反转,在spring中BeanFacotory是IoC容器的核心接口,负责实例化,定位,配置应用程序中的对象及建立这些对象间的 ...

  9. iOS菜鸟成长笔记（1）——第一个iOS应用

    前言:阳光小强最近抽时间学习iOS开发,在学习过程中发现了很多有趣的东西也遇到了很多问题,为了在学习过程中能和大家交流,记录下学习的心得和学习成果,所以就有了这一个系列文章,希望这一系列文章能形成一个 ...

  10. Jesse's Code

    题目描述 Jesse是个数学迷,他最喜欢研究“哥德巴赫猜想”,因此他的计算机密码也都采用素数. 但一直用同一个密码是不安全的,所以他要经常更换他的密码.但他只允许自己的密码中出现某些数字,且密码的每一 ...