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. easyui-combobox实现取值范围的联动

    需求:需要用两个combobox来输入一个年月的范围,下拉框的内容从服务器获取.需要实现选中前者后,后者的下拉框中不能显示比前者数值小的:选中后者后,前者的下拉框内容不能显示比后者数值大的 有两个co ...

  2. 紫书 例题 10-18 UVa 11346（连续概率）

    就是面积计算,没什么好说的. #include<cstdio> #include<cmath> #define REP(i, a, b) for(int i = (a); i ...

  3. Express的初步使用

    废话不多说直接上步骤: 1. 首先建立一个新文件夹,进入此文件夹的命令窗口通过 npm init 命令为你的应用创建一个           package.json 文件,然后下载express模块 ...

  4. Python安装（一）

    Python的安装 打开python的官网 进入下载界面 选择下载 安装步骤如下所示: 安装完成进入到dos界面,输入python -V,如下图展示及成功 打开Python工具 1:: print() ...

  5. WIN10远程桌面连接--“出现身份验证错误。要求的函数不支持”

    最近WIN10升级补丁后发现远程桌面无法连接了,报“出现身份验证错误.要求的函数不支持”的错误: 解决办法: 第一种,配置本地自己的电脑,开始菜单->搜索gpedit.msc并打开   打开配置 ...

  6. 零基础学python-3.3 标识符

    1.标识符的组成 1)有数字.下划线.英文字母组成 2)第一个字符仅仅能是字母或者下划线 3)大写和小写敏感 标识符通常是变量名称.方法名.类名等 2.keyword python里面有一系列的关键字 ...

  7. java反射机制剖析（二）— Class Loader

    上一篇博客简要的提了一下java反射机制中涉及到的一些相关知识,那么ClassLoader就是当中之中的一个.本篇博客就具体的对ClassLoader做一个相对深入的了解. 作为了解须要知道的是.事实 ...

  8. HDFS中的命令行

    HDFS中的命令行 本文介绍了HDFS以命令行执行的时候.几个经常使用的命令行的作用和怎样使用~ 1. fs fs是启动命令行动作,该命令用于提供一系列子命令. 使用形式为hadoop fs –cmd ...

  9. RvmTranslator6.6 - RVM to CATIA

    RvmTranslator6.6 - RVM to CATIA eryar@163.com RvmTranslator can translate the RVM file exported by A ...

  10. 【Redis哨兵集群】

    目录 开始配置主从复制 开始配置Redis Sentinel @ *** 在开始之前,我们先来看看Redis的主从复制 主从复制原理: 从服务器向主服务器发送SYNC命令. 主服务器接到SYNC命令后 ...