A_Struggling_Hacker

入一行,先别惦记着能赚钱,先学着让自己值钱。

写个localStorage的小例子

我在搜狗问问帮别人写代码的时候遇到一个小的问题,问题是这样的,就是题主希望在别的页面获取到前一个页面存在js里面的数据,这个时候一般都会想到的是用cookie,但是其实cookie是很有局限性的, 所以我就说其实是可以用localStorage离线缓存技术的,不过我不想写例子,所以就用之前写的一个比较麻烦的关于localStorage的例子,里面是有后台的代码的,所以有人就误会了,说这个技术不行啊, 总泵你一直需要后台的技术吧,所以我今天澄清以下,这个是不要后台的技术的,我简单的写一个例子,纯前端。

第一个页面:请求的页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-1.10.2.min.js"></script>
		
	</head>
	<body>
		<!--简单的画一个输入框-->
		<label>姓名</label>
		<input type="text" id="name"/>
		<button id="btn">登录</button>
	</body>
	<script>
		/*将text里面的name取出来*/
		var name = $("#name").val();
		$("#btn").click(function(){
			//将数据放到localStorage里面
			localStorage.setItem("name", name); 
			//跳到写一个页面
			window.location.href = "textlocalStorage.html"
		})
	</script>
</html>

第二个页面:取数据

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-1.10.2.min.js"></script>
	</head>
	<body>
			<div id="name"></div>
	</body>
	<script>
		window.onload = function(){
			//将数据取出来
			var name = localStorage.getItem("name");      
			//将数据放到div上面
 			$("#name").append(name);
		}
	</script>
</html>

效果是:




既然是离线,意思就是您可以一直刷新,内容是不会丢的,但是您用这个做登录的时候,想退出的时候,是需要将数据清除的,所以这个时候是需要clear的,写法是:

在退出的时候:

localStorage.clear();
阅读更多
版权声明:您可以转载我的文章,但是请标明文章出处。谢谢! https://blog.csdn.net/qq_41485414/article/details/79956302
个人分类: web前端
上一篇轻松破解加密的网页
下一篇BootStrap做图片轮播效果(解析)
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭