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. Redis批量执行(如list批量添加)命令工具 —— pipeline管道应用

    前言 Redis使用的是客户端-服务器(CS)模型和请求/响应协议的TCP服务器.这意味着通常情况下一个请求会遵循以下步骤: 使用Redis管道提升性能 (1)客户端向服务端发送一个查询请求,并监听S ...

  2. Python组织文件 实践：查找大文件、 用Mb、kb显示文件尺寸 、计算程序运行时间

    这个小程序很简单原本没有记录下来的必要,但在编写过程中又让我学到了一些新的知识,并且遇到了一些不能解决的问题,然后,然后就很有必要记录一下. 这个程序的关键是获取文件大小,本来用 os.path.ge ...

  3. rsyslog学习

    http://blog.csdn.net/zhaoyangjian724/article/details/52116809 http://blog.csdn.net/zhangxihangzhuan/ ...

  4. C++学习笔记11-面向对象2

     1.  仅仅能初始化直接基类 一个类仅仅能初始化自己的直接基类.直接就是在派生列表中指定的类.假设类C 从类B 派生,类B 从类A 派生,则B 是C 的直接基类.尽管每一个C 类对象包括一个A 类部 ...

  5. Android Unknown failure (Failure - not installed for 0)

    File->Settings->Build,Execuion,Deployment->Instant Run然后把Enable Instant Run to...那一项的勾去掉就好了

  6. c#记录日志的方法

    /// <summary> /// 生成日志 /// </summary> /// <param name="text"></param& ...

  7. Debian9.5解决在root用户下启用VNC后lightdm+Xfce4只能使用root登录，其他用户无法登陆

    Debian9.5解决在root用户下启用VNC后lightdm+Xfce4只能使用root登录,其他用户无法登陆 最近在研究debian9.5 VNC的问题,当VNC使用tightVNC或tiger ...

  8. python 批量下载文件

    file.txt 的内容为: http://183.xxx.xxx.54:188/my/qqq.ico::qq.exe::0::http://183.xxx.xxx.54:186/my/ddnf.ic ...

  9. Java编程思想(四) —— 复用类

    看了老罗罗升阳的专訪,不由自主地佩服,非常年轻,我之前以为和罗永浩一个级别的年龄.也是见过的不是初高中编程的一位大牛之中的一个,专訪之后.发现老罗也是一步一个脚印的人. 别说什么难做,做不了.你根本就 ...

  10. 57.NodeJS入门--环境搭建 IntelliJ IDEA

    转自:https://blog.csdn.net/wang19891106/article/details/51127133 NodeJS入门–环境搭建 IntelliJ IDEA 本人也刚开始学习N ...