使用JS中的cookie如何使页面刷新后仍保持当前内容状态不变？
使用JS中的cookie如何使页面刷新后仍保持当前内容状态不变？
我需要详细的代码，让我调试就可以了，有什么条件尽管加我QQ说，谢谢大家的支持！对于cookie我不是太精通，但知道它的基本运用，我现在制作的页面：
每次一刷新页面，其选中的一些选项它就自动还原成刚打开页面时的样子。我想用cookie来保存当前页面状态，即使刷新后也不会改变。请教下高手！写成代码形式留言或将代码发送到中，我会依规矩给予办事...旗下！
楼上的答非所问了。
在&/title& 下加上这一句：&meta name="save" content="history"& ，表示记录历史记录。在需要记录状态的控件内加上 style="behavior:url(#default#savehistory)"属性，表示这个控件需要记住状态。示例：
&html& &head& &title&saveHistory行为应用&/title& &meta name="save" content="history"& &/head& &body& &p&用了saveHistory 行为的表单项：&br&
&INPUT style="behavior:url(#default#savehistory)"&&br&
一般表单项：&br&
&input& &/p&&form name="form1" method="post" style="behavior:url(#default#savehistory)" action=""&
&select name="select" id="select"&
&option value="&/option&
&option value="&/option&
&/label&&/form&&STYLE type=text/css&#box3{padding:10border:1} &/STYLE&
&SCRIPT type=text/javascript&function openShutManager(oSourceObj,oTargetObj,shutAble,oOpenTip,oShutTip){var sourceObj = typeof oSourceObj == "string" ? document.getElementById(oSourceObj) : oSourceOvar targetObj = typeof oTargetObj == "string" ? document.getElementById(oTargetObj) : oTargetOvar openTip = oOpenTip || "";var shutTip = oShutTip || "";if(targetObj.style.display!="none"){
if(shutAble)
targetObj.style.display="none";
if(openTip
sourceObj.innerHTML = shutT
targetObj.style.display="block";
if(openTip
sourceObj.innerHTML = openT
}}}&/SCRIPT&
&P&&A style="behavior:url(#default#savehistory)" onclick="openShutManager(this,'box3',false,'点击关闭','点击展开')" href="###"&点击展开&/A&&/P&&P id=box3 style="DISPLAY: none" style="behavior:url(#default#savehistory)"&ddddd&/P&&/body& &/html&
这是记录Cookie的例子。
&!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&&html&&head&&/head&&body&&script language="javascript"& function setCookie(name,value){var Days = 30;var exp = new Date(); exp.setTime(exp.getTime() + Days*24*60*60*1000);document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();}function getCookie(name){var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");if(arr=document.cookie.match(reg)) return unescape(arr[2]);}function delCookie(name){var exp = new Date();exp.setTime(exp.getTime() - 1);var cval=getCookie(name);if(cval!=null) document.cookie= name + "="+cval+";expires="+exp.toGMTString();}&/script&&SCRIPT type=text/javascript&function openShutManager(oSourceObj,oTargetObj,shutAble,oOpenTip,oShutTip){var sourceObj = typeof oSourceObj == "string" ? document.getElementById(oSourceObj) : oSourceOvar targetObj = typeof oTargetObj == "string" ? document.getElementById(oTargetObj) : oTargetOvar openTip = oOpenTip || "";var shutTip = oShutTip || "";if(targetObj.style.display!="none"){
if(shutAble)
targetObj.style.display="none";
setCookie('name','none')
if(openTip
sourceObj.innerHTML = shutT
targetObj.style.display="block";
setCookie('name','block')
if(openTip
sourceObj.innerHTML = openT
}}}&/SCRIPT&
&P&&A onClick="openShutManager(this,'box3',false,'点击关闭','点击展开');" href="###"&点击展开&/A&&/P&&script&document.write( "&P id=box3 style=" + "'" + "DISPLAY:" + getCookie('name') + "'" + "&ddddd&br&测试测试&/P&");&/script&&/body&&/html&
的感言：很好，不错的，这位朋友很耐心的解答了我的问题，不过还会有新的问题哦...很感谢！ 相关知识
其他回答 (2)
js中能获得jsp中的数据
但是jsp是没法活的js中的数据的，因为jsp是先编译后执行，js是边编译边执行的数据没办法给当前jsp。只能用AJAX异步请求写进Cookies
Cookie nameCookie = new Cookie("name",用户名)
Cookie passwdCookie =new Cookie("password",密码）
nameCookie.setMaxAge(36000);
passwdCookie.setMaxAge(36000);
nameCookie.setPath("/");
passwdCookie.setPath("/");
response.addCookie(nameCookie);
response.addCookie(passwdCookie);
创建和存储 cookie
在这个例子中我们要创建一个存储访问者名字的 cookie。当访问者首次访问网站时，他们会被要求填写姓名。名字会存储于 cookie 中。当访问者再次访问网站时，他们就会收到欢迎词。
首先，我们会创建一个可在 cookie 变量中存储访问者姓名的函数：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())
上面这个函数中的参数存有 cookie 的名称、值以及过期天数。
在上面的函数中，我们首先将天数转换为有效的日期，然后，我们将 cookie 名称、值及其过期日期存入 document.cookie 对象。
之后，我们要创建另一个函数来检查是否已设置 cookie：function getCookie(c_name)
if (document.cookie.length&0)
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))
上面的函数首先会检查 document.cookie 对象中是否存有 cookie。假如 document.cookie 对象存有某些 cookie，那么会继续检查我们指定的 cookie 是否已储存。如果找到了我们要的 cookie，就返回值，否则返回空字符串。
最后，我们要创建一个函数，这个函数的作用是：如果 cookie 已设置，则显示欢迎词，否则显示提示框来要求用户输入名字。function checkCookie()
username=getCookie('username')
if (username!=null && username!="")
{alert('Welcome again '+username+'!')}
username=prompt('Please enter your name:',"")
if (username!=null && username!="")
setCookie('username',username,365)
这是所有的代码：&html&
&script type="text/javascript"&
function getCookie(c_name)
if (document.cookie.length&0)
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))
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())
function checkCookie()
username=getCookie('username')
if (username!=null && username!="")
{alert('Welcome again '+username+'!')}
username=prompt('Please enter your name:',"")
if (username!=null && username!="")
setCookie('username',username,365)
&body onLoad="checkCookie()"&
相关知识等待您来回答
编程领域专家
& &SOGOU - 京ICP证050897号页面导航：
→ 正文内容 cookie实现刷新不变
js 通过cookie实现刷新不变化树形菜单
通过设置cookie来保存树形菜单的状态，在页面加载时重新读取cookie来设置菜单
通过设置cookie来保存树形菜单的状态，在页面加载时重新读取cookie来设置菜单。
菜单的HTML结构：
&div class="treemenu"&
&a href="#" id="treemenu_a_1"&一级菜单一&/a&
&div class="submenu" id="submenu_1"&
&li&&a href="subpage/a.html" id="submenu_a_1_1"&二级菜单一&/a&&/li&
&li&&a href="subpage/b.html" id="submenu_a_1_2"&二级菜单二&/a&&/li&
&li&&a href="#" id="submenu_a_1_3"&二级菜单三&/a&&/li&
&li&&a href="#" id="submenu_a_1_4"&二级菜单四&/a&&/li&
&li&&a href="#" id="submenu_a_1_5"&二级菜单五&/a&&/li&
&a href="#" id="treemenu_a_2"&一级菜单二&/a&
&div class="submenu" id="submenu_2"&
&a href="#" id="submenu_a_2_1"&二级菜单一&/a&
&div class="submenu" id="submenu_2_1"&
&li&&a href="#" id="submenu_a_2_1_1"&三级菜单一&/a&&/li&
&li&&a href="#" id="submenu_a_2_1_2"&三级菜单二&/a&&/li&
&a href="#" id="submenu_a_2_1_3"&三级菜单三&/a&
&div class="submenu" id="submenu_2_1_3"&
&li&&a href="#" id="submenu_a_2_1_3_1"&四级菜单一&/a&&/li&
&li&&a href="#" id="submenu_a_2_1_3_2"&四级菜单二&/a&&/li&
&li&&a href="#" id="submenu_a_2_1_3_3"&四级菜单三&/a&&/li&
&li&&a href="#" id="submenu_a_2_2"&二级菜单二&/a&&/li&
&li&&a href="#" id="submenu_a_2_3"&二级菜单三&/a&&/li&
&li&&a href="#" id="submenu_a_2_4"&二级菜单四&/a&&/li&
&li&&a href="#" id="submenu_a_2_5"&二级菜单五&/a&&/li&
&a href="#" id="treemenu_a_3"&一级菜单三&/a&
&div class="submenu" id="submenu_3"&
&li&&a href="#" id="submenu_a_3_1"&二级菜单一&/a&&/li&
&li&&a href="#" id="submenu_a_3_2"&二级菜单二&/a&&/li&
&li&&a href="#" id="submenu_a_3_3"&二级菜单三&/a&&/li&
&li&&a href="#" id="submenu_a_3_4"&二级菜单四&/a&&/li&
&li&&a href="#" id="submenu_a_3_5"&二级菜单五&/a&&/li&
读取cookie工具类：
//cookie工具类
var cookieTool = {
//读取cookie
getCookie: function(c_name) {
if (document.cookie.length & 0) {
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.
return unescape(document.cookie.substring(c_start, c_end));
return "";
//设置cookie
setCookie: function(c_name, value, expiredays) {
var exdate = new Date();
exdate.setDate(exdate.getDate() + expiredays); //设置日期
document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString());
//删除cookie
delCookie: function(c_name) {
var exdate = new Date();
exdate.setDate(exdate.getDate() - 1); //昨天日期
document.cookie = c_name + "=;expires=" + exdate.toGMTString();
菜单事件绑定：
//菜单事件绑定
$('.treemenu a').bind('click', function() {
var $this = $(this);
var id = $this.attr('id');
var $submenu = $this.next('.submenu');
if ($submenu.length & 0) { //是否有子菜单
var flag = $(this).next('.submenu:hidden').length & 0 ? true :
if (flag) {
$submenu.show();
$submenu.hide();
var display = flag ? 'block' : 'none';
cookieTool.setCookie(id, display, 10);
cookieTool.setCookie(id, id, 10);
var curId = cookieTool.getCookie(id);
$('.treemenu').find('.on').removeClass('on').addClass('off');
$('#' + curId).addClass('on');
$('.treemenu a[class="off"]').each(function() {
cookieTool.delCookie($(this).attr('id')); //删除其他已选择选项cookie
页面加载时重新设置菜单
//页面加载读取cookies
$('.treemenu a').each(function() {
showMenu($(this).attr('id'));
//读取cookie显示菜单
function showMenu(id) {
var $this = $('#' + id);
var cookie = cookieTool.getCookie(id);
if (cookie) {
if ($this.next('.submenu').length & 0) {
$this.next('.submenu').css('display', cookie);
$('#' + cookie).addClass('on');
完整DEMO：
注意：chrome本地控制台无法读取cookie，需要在firefox/IE或者服务器环境下测试
您可能感兴趣的文章:
上一篇：下一篇：
最 近 更 新
热 点 排 行
12345678910js写入和读取cookie的问题
[问题点数：100分，结帖人YZCSzhiYZTY]
js写入和读取cookie的问题
[问题点数：100分，结帖人YZCSzhiYZTY]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
相关推荐：
2013年12月 Web 开发大版内专家分月排行榜第三
2014年2月 总版技术专家分月排行榜第二2013年4月 总版技术专家分月排行榜第二
2014年11月论坛优秀版主
2013年12月 Web 开发大版内专家分月排行榜第三
匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。当前位置：&>&&>&&>&
JS读取与写入Cookies的方法
发布时间：编辑：
使用js也可以操作cookies，这里为大家提供读取与写入Cookies的方法，有需要的朋友不妨看看。
使用js也可以操作cookies，这里为大家提供读取与写入Cookies的方法，有需要的朋友不妨看看。
复制代码 代码如下:
function setCookie(name,value)
&&& var Days = 30;
&&& var exp& = new Date();&&& //new Date(&December 31, 9998&);
&&&&&&& exp.setTime(exp.getTime() + Days*24*60*60*1000);
&&&&&&& document.cookie = name + &=&+ escape (value) + &;expires=& + exp.toGMTString();
function getCookie(name)
&&& var arr,reg=new RegExp(&(^| )&+name+&=([^;]*)(;|$)&);
&&&&&&& if(arr=document.cookie.match(reg)) return unescape(arr[2]);
您可能感兴趣的文章：
与 JS读取与写入Cookies的方法 有关的文章
本文标题：
本页链接：
12345678910
12345678910也许你感兴趣
1. 2. 3. 4. 5. 6. 7. 8. 9. 10.