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. Java基础学习总结（13）——流IO

    一.JAVA流式输入/输出原理 流是用来读写数据的,java有一个类叫File,它封装的是文件的文件名,只是内存里面的一个对象,真正的文件是在硬盘上的一块空间,在这个文件里面存放着各种各样的数据,我们 ...

  2. python main函数

    关于Python的主(main)函数问题 2007-07-23 19:14 初次接触Python的人会很不习惯Python没有main主函数.这里简单的介绍一下,在Python中使用main函数的方法 ...

  3. 第二十四天 框架之痛-Spring MVC(四）

    6月3日,晴."绿树浓阴夏日长. 楼台倒影入池塘. 水晶帘动微风起, 满架蔷薇一院香". 以用户注冊过程为例.我们可能会选择继承AbstractController来实现表单的显示 ...

  4. iBatis框架使用 4步曲

    iBatis是一款使用方便的数据訪问工具,也可作为数据持久层的框架.和ORM框架(如Hibernate)将数据库表直接映射为Java对象相比.iBatis是将SQL语句映射为Java对象. 相对于全自 ...

  5. Effective JavaScript Item 40 避免继承标准类型

    本系列作为Effective JavaScript的读书笔记. ECMAScript标准库不大.可是提供了一些重要的类型如Array,Function和Date.在一些场合下.你或许会考虑继承当中的某 ...

  6. 7-07. PAT排名汇总（25） （结构体 ZJU_PAT）

    题目链接:http://www.patest.cn/contests/ds/7-07 编程能力測试(Programming Ability Test,简称PAT)是浙江大学计算机科学与技术学院主办的专 ...

  7. Docker Network Configuration 高级网络配置

    Network Configuration TL;DR When Docker starts, it creates a virtual interface named docker0 on the ...

  8. Android严苛模式StrictMode使用详解

    StrictMode类是Android 2.3 (API 9)引入的一个工具类,可以用来帮助开发者发现代码中的一些不规范的问题,以达到提升应用响应能力的目的.举个例子来说,如果开发者在UI线程中进行了 ...

  9. python 写了一个批量拉取文件进excel文档

    路径如: C:\\Users\\huaqi\\Desktop\\信息收集 “信息收集”目录下有以下子目录:[技术,客服,运营,行政] “技术”目录下有以下子文件:[小白.txt,小红.txt,小黑.t ...

  10. javascript中运算符有哪些？ 他们的优先级 呢？

    一元操作符 ++, -- + -(正负)逻辑操作符 ! && ||基本运算符 +, -, *, /, %关系操作符 >, <, >=, <=, ===, ==, ...