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. POJ-1001 Exponentiation 高精度算法

    题目链接:https://cn.vjudge.net/problem/POJ-1001 以前写过一个高精度乘法,但是没有小数点,实现起来也没什么难得, 现在把代码都般过来,等会把旧电脑弄一弄,暂时就不 ...

  2. 今天听说了一个压缩解压整型的方式-group-varint

    group varint https://github.com/facebook/folly/blob/master/folly/docs/GroupVarint.md 这个是facebook的实现 ...

  3. iOS 画圆形头像

    demo下载地址:http://pan.baidu.com/s/1mgBf6YG _logoImageView.image = [self getEllipseImageWithImage:[UIIm ...

  4. SQL语句查询数据库所有表和所有字段的详细信息（包括表描述和字段描述）

    select (case then ddd.value else '' end ) as "表名(中文)" --如果表名相同就返回空 , (case then d.name els ...

  5. U-BOOT概述及源码分析（一）

    嵌入式Linux系统从软件角度通常可以分为以下4个层次: 引导加载程序 | Linux内核 | 文件系统 | 用户应用程序 嵌入式Linux系统中典型分区结构: 正常启动过程中,Bootloader首 ...

  6. libc.so.6: version GLIBC_2.14 not found

    https://blog.csdn.net/heylun/article/details/78833050

  7. debian8平滑升级到debian9

    本文在Creative Commons许可证下发布. 首先,在升级时可以查看一下自己的版本号: uname -a ##查看内核信息 cat /etc/issue ##查看发行版本号   方法1:利用网 ...

  8. .js控制一次加载一张图片，加载完后再加载下一张

    js怎么控制一次加载一张图片,加载完后再加载下一张 (1)方法1 (1)方法2

  9. CCF模拟 无线网络

    无线网络 时间限制: 1.0s 内存限制: 256.0MB   问题描述 目前在一个很大的平面房间里有 n 个无线路由器,每个无线路由器都固定在某个点上.任何两个无线路由器只要距离不超过 r 就能互相 ...

  10. 关于Shiro的退出请求是如何关联到登录请求的思考

    一.结论 先给出结论,是因为本身是很简单的道理.假设我们没有使用任何认证授权的框架,就简单的使用Cookie和HttpSession,那么用户登录后的每一个请求是如何关联上这个用户的呢?答案很简单,由 ...