js中简单的cookie应用案例

于 2019-08-26 21:03:18 发布
阅读量604 收藏 3
点赞数
分类专栏： java笔记 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/peter_gudao/article/details/100085642
版权
本文通过一个简单的JavaScript案例，展示了如何使用cookie来实现按钮点击改变文本颜色并保存用户设置。当用户点击'变红'或'变绿'按钮时，文本颜色相应改变，并利用cookie保存当前颜色状态。同时，介绍了cookie的基本原理，强调了键值对的唯一性和设置存活时间的重要性，以及如何清除cookie。
摘要由CSDN通过智能技术生成

案例要求：变红按钮把文本变红，变绿按钮把文本变绿，并用cookie保存设置
在这里插入图片描述
实现代码：

	<!DOCTYPE html>
	<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
		</style>
		<script>
			onload = function(){
				var arr = document.cookie.split("=");//获取cookie（style=color）键值对并分割
				getColor(arr[1]);
			}
			
			function getColor(c){
				var style = document.getElementsByTagName("style")[0];
				style.innerHTML= "*{color:"+c+";}";
				setCookie(c);
			}
			
			function setCookie(c){
				var date = new Date();
				date.setTime(date.getTime()+24*60*60*1000);
				document.cookie="style="+c+";expires="+date.toGMTString();
			}
			
			function clearCookie(){//清除cookie
最低0.47元/天 解锁文章
书生乂
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS使用cookie保存用户登录信息操作示例
10-16
主要介绍了JS使用cookie保存用户登录信息操作,结合具体实例形式分析了javascript使用cookie实现针对用户信息的存储与读取相关操作技巧,需要的朋友可以参考下
JavaScript cookie详解及简单实例应用
10-20
主要介绍了JavaScript cookie详解及简单实例应用的相关资料,这里对js cookie 的介绍及基本属性和简单应用做了详解，需要的朋友可以参考下
JS中Cookie详解及示例展示
热门推荐
Java_han的专栏
08-10 1万+
Cookie的作用cookie机制将信息存储于用户硬盘，因此可以作为全局变量，这是它最大的一个优点。它可以用于以下几种场合。 （1）保存用户登录状态。例如将用户id存储于一个cookie内，这样当用户下次访问该页面时就不需要重新登录了，现在很多论坛和社区都提供这样的功能。 cookie还可以设置过期时间，当超过时间期限后，cookie就会自动消失。因此，系统往往可以提示用户保持登录状态的时间：常见
JS操作Cookies的小例子
aijiagui7454的博客
10-16 82
这篇文章介绍了JS操作Cookies的小例子，有需要的朋友可以参考一下。您可能感兴趣的文章：js 保存与获取cookie的代码javascript cookie操作实例详解javascript cookie操作的例子javascript操作cookie的小例子JS读取与写入Cookies的方法js操作cookie详解 代码： Cookie = { setCookie: func...
javascript cookie实例
u011683001的专栏
05-22 537
cookie是 存于用户硬盘的一个文件，这个文件通常对应于一个域名，当浏览器再次访问这个域名时，便使这个cookie可用。因此，cookie可以跨越一个域名下的 多个网页，但不能跨越多个域名使用。 不同的浏览器对cookie的实现也不一样，但其性质是相同的。例如在Windows 2000以及Windows xp中，cookie文件存储于documents and settings/userName
JavaScript操作cookie实例
qq_38836082的博客
04-18 236
&lt;script type="text/javascript"&gt;var isHasCookei = getCookie("haveSave");    // 首先获取cookie  console.log(isHasCookei);                   // 成功则打印yes  if (!(isHasCookei == "yes")) {      setCookie("...
js操作cookie的简单例子
人在旅途
07-25 629
今天第一次尝试使用cookie，在网上找了个例子，简单一用，基本可以满足要求，记录备忘。 function Set(Cookie_name) { var Then = new Date() Then.setTime(Then.getTime() + 1*3600000 ) //小时 document.cookie = Cookie_name+"=true;expires
cookie身份认证小案例
03-09
总的来说，Cookie身份认证是Web应用程序中常用的身份验证方法，它依赖于浏览器自动发送Cookie的能力来保持用户会话。然而，它也存在一定的安全风险，因此开发者需要采取额外的安全措施，如使用HTTPS、设置HttpOnly和...
跨域携带cookie案例.rar
11-19
本文将深入探讨“跨域携带cookie”的案例，重点解析如何通过nginx服务器解决这一问题。首先，我们需要理解什么是跨域以及为什么会有跨域限制。 跨域是指浏览器的同源策略，即JavaScript只能访问与当前页面同协议、...
JavaScript_DOM知识点+案例应用
01-20
本文将深入讲解JavaScript DOM的相关知识点，并结合实际案例应用来帮助理解。 1. **HTML DOM访问（方法）**： - `getElementById`：通过ID获取特定元素，例如`document.getElementById('i1')`。 - `...
js用cookie记住密码实例
04-23
js操作cookie，记住用户名，密码。
cookie示例
06-11
cookie是示例介绍　去下载了一本电子书， http://www.ixdzs.com/down/62453_4?c=24906480 重生之神级学霸txt下载,epub下载 ， 用EPubBuilder编辑器加载40多秒， 后来发现这本书有300多个章节， 也难怪， 　　如果需要编辑的epub书籍章节非常多， 比如超过100章， 加载会很慢，umeditor创建编辑器需要初始的时间比较久... ， 但是现在的的电子书章节和整体内容都比较多， 性能是个大瓶颈.. 　 这些是我网上下的epub书籍的截图预览：
登录时记住用户名和密码及cookie案例应用
10-27
本文将实现登录时记住用户的帐号密码,接下来我们来模拟一个登录介面，要把这个登录的信息记录至Cookie，还要把Cookie的过期时间设置7天之后过期，感兴趣的朋友可以参考下，希望本文对你的cookie学习有所帮助
官方jquery.cookie.js带demo
04-05
jQuery cookie是个很好的cookie插件，大概的使用方法如下 example $.cookie(’name’, ‘value’); 设置cookie的值，把name变量的值设为value example $.cookie(’name’, ‘value’, {expires: 7, path: ‘/’, domain: ‘jquery.com’, secure: true}); 新建一个cookie 包括有效期 路径 域名等 example $.cookie(’name’, ‘value’); 新建cookie example $.cookie(’name’, null); 删除一个cookie var account= $.cookie('name'); 取一个cookie(name)值给myvar ************************************************************* jQuery cookie是个很好的cookie插件，大概的使用方法如下 example $.cookie(’name’, ‘value’); 设置cookie的值，把name变量的值设为valu e example $.cookie(’name’, ‘value’, {expires: 7, path: ‘/’, domain: ‘jquery.com’, secure: true}); 新建一个cookie 包括有效期 路径 域名等 example $.cookie(’name’, ‘value’); 新建cookie example $.cookie(’name’, null); 删除一个cookie var account= $.cookie('name'); 取一个cookie(name)值给myvar ************************************************************** jQuery cookie是个很好的cookie插件，大概的使用方法如下 example $.cookie(’name’, ‘value’); 设置cookie的值，把name变量的值设为value example $.cookie(’name’, ‘value’, {expires: 7, path: ‘/’, domain: ‘jquery.com’, secure: true}); 新建一个cookie 包括有效期 路径 域名等 example $.cookie(’name’, ‘value’); 新建cookie example $.cookie(’name’, null); 删除一个cookie var account= $.cookie('name'); 取一个cookie(name)值给myvar
利用cookie实现换肤
07-31
在浏览网页的时候，我们经常可以看到部分页面上具有换肤功能，点击改变皮肤且但我们下次浏览的时候，还会是我们选择的皮肤。作为菜鸟来说，这是一种赤裸裸的诱惑……今天查了相关资料，很粗糙的写了一个利用coolkie的换肤效果。求大神勿喷，也请多多指点。下面是菜鸟代码……
js中cookie的使用详细分析
07-10
JavaScript中的Cookie是一种小型文本文件，由浏览器存储在用户的本地设备上，主要用于在用户与网站交互时持久化数据。Cookie的设计初衷是为了弥补Web应用程序中的全局变量不足，它可以在多个页面间保持状态，允许...
js cookie 实例
DOS的博客
07-28 768
首先来介绍下cookie知识点： document.cookie 来设置cookie cookie.domain表示cookie的域， 控制cookie所在的域，跨域的不能访问 cookie.path表示cookie的路经 cookie能让其path路径下的页面访问以下是模仿浏览器自动登录的功能，每次刷新时来检查cookie，弹出欢迎界面。function setCookie(name,v
javascript操作cookie实例
紫竹林
06-08 117
本文讲述在jsp中调用javascript对客户的cookie进行操作的方法。cookie因为是存储在客户本地上的，所以你可以利用这个特点做很多事的。本文提供一个公共的.js文件和一端javascript代码，当然.js中的方法你也可以再javascript中使用。 cookies.js文件： [code="js"] function addCookie(name,value) {...
javascript 操作cookie实例
li330324124的专栏
11-11 146
  &lt;html&gt; &lt;head&gt; &lt;script type="text/javascript"&gt; function getCookie(c_name) { if (document.cookie.length&gt;0) { c_start=document.cookie.indexOf(c_name + "=") if (...
构建HTML5与JavaScript跨平台Web应用
JavaScript MVC框架，如AngularJS、React或Vue.js，提供了一种结构化的方式来组织复杂的前端代码，使得应用更易于维护和扩展。这些框架通常包括模型-视图-控制器（MVC）设计模式，帮助开发者管理应用的状态和用户...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值