用cookie实现简单的用户自定义页面样式
程序员文章站
2022-03-13 13:55:04
...
什么是 Cookie?
Cookie 是一些数据, 存储于你电脑上的文本文件中。
当 web 服务器向浏览器发送 web 页面时,在连接关闭后,服务端不会记录用户的信息。
- Cookie 的作用就是用于解决 “如何记录客户端的用户信息”:
- 当用户访问 web 页面时,他的名字可以记录在 cookie 中。
- 在用户下一次访问该页面时,可以在 cookie 中读取用户访问记录。
效果演示
代码演示如下:
首先创建一个one.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用户自定义页面样式</title>
<script src="cookie.js"></script>
<style type="text/css">
a{
color: #000000;
text-decoration: none;
transition: all .5s;
}
a:hover{
background-color: #f3f3f3;
}
</style>
</head>
<body>
<input type="button" onclick="setBgColor('red')" value="设置页面背景色">
<input type="button" onclick="setFontColor('yellow')" value="设置字体色">
<p><a href="two.html">点击跳转到自定义样式的页面</a></p>
<script>
function setBgColor() {
color = window.prompt("请输入页面背景颜色");
setCookie('bgcolor', color, 3);
}
function setFontColor(color) {
color = window.prompt("请输入字体颜色");
setCookie('fontcolor', color, 3);
}
</script>
</body>
</html>
然后是two.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自定义过后的页面样式</title>
<style id="st"></style>
<script src="cookie.js"></script>
</head>
<body>
<h1>这是一个h1标签</h1>
<h2>这是一个h2标签</h2>
<p>这是一个段落标签</p>
</body>
<script>
window.onload = function() {
var bgcolor = getCookie('bgcolor');
var fontcolor = getCookie('fontcolor');
var stobj = document.getElementById('st');
stobj.innerText = ' * {background-color:' + bgcolor + ';color:' + fontcolor + ';}';
}
</script>
</html>
最后编写设置cookie的js代码,cookie.js
//设置cookie
function setCookie(cname,cvalue,exdays){
var d = new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000));
var expires = "expires="+d.toGMTString();
document.cookie = cname+"="+cvalue+"; "+expires;
}
//获取cookie
function getCookie(cname){
var name = cname + "=";
console.log(name);
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i].trim();
if (c.indexOf(name)==0) { return c.substring(name.length,c.length); }
}
return "";
}
上一篇: 网站搭建系列:云虚拟主机建站部署的过程中如何上传FTP?
下一篇: 简单计算器
推荐阅读
-
Android用MVP实现一个简单的类淘宝订单页面的示例
-
Django利用cookie保存用户登录信息的简单实现方法
-
用phpmailer实现简单openvpn用户认证的实现代码
-
Android用MVP实现一个简单的类淘宝订单页面的示例
-
使用JSP实现简单的用户登录注册页面示例代码解析
-
用AJAX实现页面登陆以及注册用户名验证的简单实例
-
Android布局管理器-使用TableLayout表格布局管理器实现简单的用户登录页面
-
Django 使用 cookie 实现简单的用户管理
-
Django利用cookie保存用户登录信息的简单实现方法
-
用phpmailer实现简单openvpn用户认证的实现代码