Cookie练习

最新推荐文章于 2022-09-07 19:50:40 发布

Bright2017

最新推荐文章于 2022-09-07 19:50:40 发布

阅读量718

点赞数 1

分类专栏：网页中用到过的效果 Jquery 文章标签： cookie

本文链接：https://blog.csdn.net/Bright2017/article/details/69752741

版权

网页中用到过的效果同时被 2 个专栏收录

138 篇文章 0 订阅

订阅专栏

Jquery

25 篇文章 0 订阅

订阅专栏

很长时间没用过cookie了，前段时间做项目，出了一个小问题，重复加载的问题，在解决的过程中，朋友建议我可以每次刷新页面再进行操作。这里就用cookie做一个简单的例子。

这个例子其实很简单，只是利用了cookie记录当前位置的index,点击之后刷新,再回到cookie记录的那个位置.
如果看的不是很明白,可以打开google调试工具，按照下面的图片查看你记录的cookie值.c

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Cookie练习</title>
	</head>
	<body>
		<div id="demo">
			<div class="demo1">内容111</div>
			<div class="demo2">内容222</div>
			<div class="demo3">这是页面刷新之后弹出来的内容!</div>
			<div class="demo4">内容444</div>
			<div class="demo5">内容555</div>
		</div>
		<h1>点击第三行文字，在出现弹框的时候，页面已经刷新了一次，也可以自己按F5刷新，还是会弹出来，因为浏览器cookie已经记录了你在刷新之前点击的cookie值。</h1>
		
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script src="//cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
		<script type="text/javascript">
			$(function(){
				var page = $.cookie("page");
			    if (page == 2) {
			        var Text=$("#demo").children().eq(page).text();
			        alert(Text);
			    }
				 //获取当前点击位置的cookie，执行一次页面刷新
				$(".demo3").click(function(){
				 	if ($(this).index() == 2) {
				        $.cookie("page", $(this).index());
				        window.location.reload();
				   }
				});
			 });
		</script>
	</body>
</html>

Bright2017

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Cookie练习

很长时间没用过cookie了，前段时间做项目，出了一个小问题，重复加载的问题，在解决的过程中，朋友建议我可以每次刷新页面再进行操作。这里就用cookie做一个简单的例子。 Cookie练习内容111 内容222 这是页面刷新之后弹出来的内容! 内容444 内容555 点击第三行文字，在出现弹框的时候，页面已经刷新了一次，也可以
复制链接

扫一扫