文档章节

快速上手html5 localStorage

imyfd
 imyfd
发布于 2016/11/29 10:47
字数 353
阅读 4
收藏 0

localstorage是html5的新特性,相对于数据不能超过4kb的cookie,localstorage不仅可达到5mb的大小,还可以无限期的储存,而localstorage的另一种特性sessionStorage则是仅支持当前浏览器关闭前有效储存,用法仍是相同但localstorage并不支持ie8及以下的浏览器,cookie在低版本浏览器仍是不可舍弃的功能。不多说,直接开始上手localStorage。

<script type="text/javascript">
		if (localStorage.times){
		  localStorage.times=Number(localStorage.times) +1;
		}
		else{
		  localStorage.times=1;
		}
		document.write("登录了 "+ localStorage.times + "次");
</script>

代码中可以看出来,可以直接在localStorage中定义一个变量,变量会被直接储存到本地当中,每次刷新就times+1。

当我们到一定程度不需要localStorage需要删除本地数据时,我们可以直接利用clear()删除

if (localStorage.times){
			if(localStorage.times>=10){
				localStorage.clear();
			}else{
			  	localStorage.times=Number(localStorage.times) +1;
			}
		}
		else{
		  localStorage.times=1;
		}
		document.write("登录了 "+ localStorage.times + " 次");

可以看到,当times>=10时,数据被删除,times变成undefined。 还有一点,localStorage里储存的值只是字符串,需要手动转换为数字。

我们也可以用setItem去设置,效果一致。

if(localStorage){
			localStorage.setItem('times',10);
		}
		
		document.write("登录了 "+ localStorage.getItem('times') + " 次");

在使用localStorage的时候也要注意,他有永久储存的机制,需要自己手动写JS文件去删除,还有localStorage是不能跨浏览器使用的,只能取各自浏览器的值。

© 著作权归作者所有

共有 人打赏支持
imyfd
粉丝 0
博文 3
码字总数 1502
作品 0
深圳
私信 提问
推荐10款非常优秀的HTML5开发工具

HTML5发展如火如荼,随着各大浏览器对HTML5技术支持的不断完善以及HTML5技术的不断成熟,未来HTML5必将改变我们创建Web应用程序的方式。今天这篇文章向大家推荐10款优秀的HTML5开发工具,帮助...

长平狐
2012/10/09
156
0
推荐 10 个优秀的 HTML5 编码工具

HTML5将彻底改变我们建设网站和Web应用程序的方式。这里有10个伟大的工具,用于简化和提高HTML5的编码。 假如你才刚开始利用HTML5来创建网站,可访问Initializr来入门。这个网站将帮您根据样...

小编辑
2011/08/22
3.2K
8
推荐10款非常优秀的HTML5开发工具

HTML5发展如火如荼,随着各大浏览器对HTML5技术支持的不断完善以及HTML5技术的不断成熟,未来HTML5必将改变我们创建Web应用程序的方式。今天这篇文章向大家推荐10款优秀的HTML5开发工具,帮助...

红薯
2011/10/09
74.4K
13
史无前例的 HTML5 资源参考指南

尽管 HTML5 规范在 2014 年之前不会有正式版本,很多设计师已经开始试水高级浏览器已经支持的部分 HTML5 功能。HTML5 为 Web 设计和应用开发打开了一扇全新的门,原生支持了以前只可能使用 ...

李长春
2012/03/02
0
1
9款流行的 HTML5/CSS3 框架推荐

HTML5 和 CSS3 框架越来越流行,紧跟潮流,本文推荐9款不错的HTML5 和 CSS3 框架。 Gridless Gridless 是个很棒的HTML5 和CSS3 框架,制作跨平台网站排版、布局等。 Inuit.css 作者 Harry Ro...

小卒过河
2011/06/27
36.4K
1

没有更多内容

加载失败,请刷新页面

加载更多

零距离接触阿里云时序时空数据库TSDB

概述 最近,Amazon新推出了完全托管的时间序列数据库Timestream,可见,各大厂商对未来时间序列数据库的重视与日俱增。 阿里云TSDB是阿里巴巴集团数据库事业部研发的一款高性能分布式时序时空...

阿里云云栖社区
15分钟前
0
0
OkHttpClient封装

import java.io.BufferedReader; import java.io.InputStream; import java.io.InputStreamReader; import java.util.Map; import java.util.TreeMap; import java.util.Map.Entry; import o......

尘叙缘
17分钟前
1
0
零距离接触阿里云时序时空数据库TSDB

概述 最近,Amazon新推出了完全托管的时间序列数据库Timestream,可见,各大厂商对未来时间序列数据库的重视与日俱增。 阿里云TSDB是阿里巴巴集团数据库事业部研发的一款高性能分布式时序时空...

阿里云官方博客
17分钟前
0
0
centos 7 nginx_install.sh

#!/bin/bashset -eprintf "============开始安装nginx\n"printf "============输入nginx下载url,按Enter默认下载1.14.2版本\n"download_url='';while truedoread down...

偶遇一只小仙女
18分钟前
0
0
数据库高并发下乐观锁的原理

在高并发下,经常需要处理SELECT之后,在业务层处理逻辑,再执行UPDATE的情况。 若两个连接并发查询同一条数据,然后在执行一些逻辑判断或业务操作后,执行UPDATE,可能出现与预期不相符的结...

hansonwong
20分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部