利用cookie记忆当前位置的防刷新导航条,主要向大家展示如何在Js中使用Cookies技术,用好了Cookies,会使你的Js技术更上一层楼。这个菜单就感觉不错,当你鼠标点击之后,重新刷新页面后它仍然是保留在原位置,好像带有记忆功能。
利用cookie记忆当前位置的防刷新导航条,主要向大家展示如何在Js中使用Cookies技术,用好了Cookies,会使你的Js技术更上一层楼。这个菜单就感觉不错,当你鼠标点击之后,重新刷新页面后它仍然是保留在原位置,好像带有记忆功能。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>cookie记忆-防刷新菜单</title>
<style>
a{color:#5A73F3;text-decoration:none}
body{background:#333;margin:30px;font-size:14px;}
#menu li{float:left;height:25px;line-height:25px;list-style:none}
#menu li a{padding:10px;}
a:hover{background:#ccc;color:##3399FF}
a.hover{height:25px;line-height:25px;background:red;color:#ffffff}
a,area{blr:e-xpression(this.onFocus=this.blur())}
:focus{-moz-outline-style:none;}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="javascript:void(0)" class="hover" onclick="changename(0)" hidefocus="true">我的菜单</a></li>
<li><a href="javascript:void(0)" onclick="changename(1)" hidefocus="true">网页模板</a></li>
<li><a href="javascript:void(0)" onclick="changename(2)" hidefocus="true">精品代码</a></li>
<li><a href="javascript:void(0)" onclick="changename(3)" hidefocus="true">设计素材</a></li>
<li><a href="javascript:clear();" hidefocus="true">恢复初始</a></li>
</ul>
</div>
<script language="javascript">
function changename(c,cl)
{
var d=document.getElementById("menu").getElementsByTagName("a");
if(!cl)
{
writeCookie("hovers",c,222);
}
c=readCookie("hovers")?readCookie("hovers"):c;
for(i=0;i<d.length;i++)
{
d[i].className=i==c?"hover":"";
}
}
function writeCookie(name, value, hours)
{
var expire = "";
if(hours != null)
{
expire = new Date((new Date()).getTime() + hours * 3600000);
expire = "; expires=" + expire.toGMTString();
}
document.cookie = name + "=" + escape(value) + expire;
}
function readCookie(name)
{
var cookieValue = "";
var search = name + "=";
if(document.cookie.length > 0)
{
offset = document.cookie.indexOf(search);
if (offset != -1)
{
offset += search.length;
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
cookieValue = unescape(document.cookie.substring(offset, end))
}
}
return cookieValue;
}
function clear()
{
writeCookie("hovers","",222);
document.location=document.location.href;
}
changename(0,1)
</script>
</body>
</html>
分享到:
相关推荐
### JS读取COOKIE知识点详解 #### 一、概述 在Web开发中,Cookie是一种非常重要的技术,用于存储用户的浏览偏好、登录状态等信息。通过JavaScript(简称JS)操作Cookie,可以实现用户信息的记忆功能,提高用户体验...
标题和描述中的知识点主要聚焦在JavaScript(JS)中如何利用cookie来实现记住用户账号和密码的功能,这在现代Web开发中是一项非常实用且常见的技术。接下来,我们将详细解析这一过程,包括cookie的基本概念、如何...
js中cookie的创建和读取单个cookie值,以及设置cookie的过期时间。 能够判断是否有自己需要查找的cookie,如果没有查到到就可以执行创建语句
js写的方法,可以设置cookie和获取cookie值,简单易懂
通过函数获取JavaScript cookie
jdcookie.js下载 JD cookie一键获取脚本,基于JavaScript jdcookie.js下载 JD cookie一键获取脚本,基于JavaScript jdcookie.js下载 JD cookie一键获取脚本,基于JavaScript jdcookie.js下载 JD cookie一键获取脚本...
当一个Cookie被设置为HttpOnly时,JavaScript无法通过Document.cookie API或其他方式访问到这个Cookie。这样一来,即使网页中存在XSS漏洞,恶意脚本也无法窃取到包含敏感信息的Cookie,从而降低了攻击者盗取用户身份...
一般关于js读取cookie方法有很多,我们下面的实例函数主要是利用split函数来分切,和[removed]获取所有cookie再利用for遍历所有数组,判断如果cookie名相同,那么这个cookie 就是我们要找的。 方法一 代码如下:var ...
当我们使用JavaScript的document.cookie属性或在服务器端使用如***的HttpCookie类来读取cookie时,并不能直接获取到过期时间。实际上,document.cookie仅能读取到cookie的名称和值,而HttpCookie类的Expires属性在...
2. **恢复数据**:当用户重新访问网站时,JavaScript 读取 Cookie 中的购物车数据,并在页面加载时恢复购物车状态。 3. **限制大小**:需要注意的是,每个 Cookie 的大小不超过 4KB,因此对于大量商品或复杂数据,...
本文将详细讲解如何使用JavaScript(JS)来设置和读取cookie,从而实现登录时记住密码的功能。 首先,理解cookie的基本概念。Cookie是由服务器端生成,发送到客户端(浏览器),并存储在本地的一种小数据片段。它...
例如,服务器通过Java Cookie设置会话ID,然后在客户端通过JS读取Cookie,实现页面之间的状态保持。同时,正则表达式可用于处理和解析这些Cookie,以满足特定的需求。 总结来说,JS和Java Cookie提供了在客户端和...
js写入cookie js读取cookie
读取Cookie则需要解析`document.cookie`字符串,由于这个字符串包含了多个键值对,我们需要遍历并根据名称匹配。以下是一个简单的读取Cookie的函数: ```javascript function getCookie(name) { var cookies = ...
在JavaScript(JS)中,Cookie是一种非常常见的技术,用于存储客户端的数据。Cookie主要由服务器端设置,然后由浏览器在每次请求该服务器时自动发送。在本文中,我们将深入探讨如何使用JavaScript来创建、读取、更新...
**读取Cookie:** 要读取已存在的Cookie,只需传入Cookie的名称到`$.cookie()`方法,它将返回对应的值。如果Cookie不存在,返回`undefined`。 ```javascript var username = $.cookie('username'); console.log...
JS cookie 操作工具类,对cookie的设置 读取 删除 ,有效期的设置等