Javascript:存储和读取cookie

在别处看到的好文章,发布下让更多人看到,自己也保存一下方便查阅

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>

————————————————
版权声明:本文为CSDN博主「books1958」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/books1958/java/article/details/44222889

猜你喜欢

转载自www.cnblogs.com/xuetuan/p/12742647.html
今日推荐