写个localStorage的小例子

27人阅读 评论(0) 收藏 举报
分类:

我在搜狗问问帮别人写代码的时候遇到一个小的问题,问题是这样的,就是题主希望在别的页面获取到前一个页面存在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();
查看评论

有关localStorage的一个小demo

IE8以及以上的主流浏览器都支持,但是在使用之前也要先判断浏览器是否支持,它和sessionStorage基本上是一样的,它俩的区别就在于存储的时间不同,前者可永久存储,后者是当窗口一关闭就不复存在,...
  • zsl_955200
  • zsl_955200
  • 2017-01-05 15:10:16
  • 476

localStorage实现便签小程序

前言:今天写了个小练习,把这几天看的东西巩固一下,在这个程序中用到了localStorage存储和json串的转换。下面是具体的实现代码: (1)首先判断是否存在用户,从而显示相应的界面functi...
  • Picking_up_stones
  • Picking_up_stones
  • 2016-11-20 23:58:50
  • 913

实例以及详解localStorage进行本地存储

localStorage的使用方法 localStorage的方法非常简单,就是基本的增删查 几点注意 存储在 localStorage 里面的数据没有过期时间(expiration time...
  • kingrome2017
  • kingrome2017
  • 2017-07-21 09:20:27
  • 962

localStorage 简单例子

//用localStorage 来保存数据 localStorage.key='想要保存的值'; //将localStorage中的值取出来 var hoge = localStorage.ke...
  • sunnychen90
  • sunnychen90
  • 2015-12-01 16:06:27
  • 144

HTML5中的Web Storage(sessionStorage||localStorage)理解与简单实例

Web Storage是什么?   Web Storage功能,顾名思义,就是在Web上针对客户端本地储存数据的功能,具体来说Web Storage分为两种; sessionStorage: ...
  • zz410675629
  • zz410675629
  • 2014-05-23 15:31:50
  • 1971

python 两个值得学习的小例子

这两个问题都是在http://www.pythontip.com中做pythin挑战时碰到的,觉得很不错 1. 给你一个字符串a和一个正整数n,判断a中是否存在长度为n的回文子串。如果存在,则...
  • Sam_soYoung
  • Sam_soYoung
  • 2015-04-02 10:39:37
  • 1113

【实例】html5中使用localStorage实现简易的便利贴网页

要求 实现长时间(即便是关了浏览器)也能记录数据让每一条便利贴以对象的方式存储 思路 可以使用html5中的localStorage实现长时间的数据本地存储使用json中的parse和stri...
  • u010513756
  • u010513756
  • 2015-08-01 17:28:54
  • 17325

springmvc例子

  • 2014年01月16日 11:54
  • 6.89MB
  • 下载

HTML5 localStorage本地存储实际应用举例

一、引言 HTML5虽未来到其鼎盛时期,但这并不妨碍我们在实际项目中渐进使用HTML5的一些特性。就我所做的项目而言,应用的HTML5相关特性有:data-自定义属性、placeholder、以及e...
  • zgmu
  • zgmu
  • 2016-01-05 17:14:08
  • 747

localStorage使用很简单

原文链接:http://www.cnblogs.com/st-leslie/p/5617130.html一、什么是localStorage、sessionStorage在HTML5中,新加入了一个lo...
  • cometwo
  • cometwo
  • 2016-06-28 14:19:08
  • 11962
    个人资料
    专栏达人 持之以恒
    等级:
    访问量: 3003
    积分: 493
    排名: 10万+
    博主简介
    昵称:ClearLove
    简介:性别男、爱好女!
    擅长:手机评测、手机介绍。
    兴趣:搞机、篮球、看书、破解软件
    座右铭:别BB,上代码
    博客专栏
    文章存档
    最新评论