Javascript：存储和读取cookie

最新推荐文章于 2024-05-15 12:37:16 发布

books1958

最新推荐文章于 2024-05-15 12:37:16 发布

阅读量1.6k

点赞数

分类专栏： html/css/javascript 文章标签：存储 cookie javascript

本文链接：https://blog.csdn.net/books1958/article/details/44222889

版权

html/css/javascript 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

Cookie是网页开发中的一项重要技术，用于在本地存储一些信息（如用户名，密码，登录状态）以便用户下一次访问时使用（或在其它页面使用）。cookie的格式是键值对，多个键值对之间以分号分隔，如 name=zhangsan;age=21

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

注：必须把该html文件部署在web服务器（如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>