文档章节

快速上手html5 localStorage

imyfd
 imyfd
发布于 2016/11/29 10:47
字数 353
阅读 3
收藏 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
深圳
史无前例的 HTML5 资源参考指南

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

李长春
2012/03/02
0
1
扣丁学堂HTML5培训课程怎么样

  在如今,随着移动互联网技术的发展和进步,比如HTML5在移动互联端的应用,让更多人了解到它的丰富性趣味性便利性,但HTML5就包括这些么?扣丁学堂HTML5培训课程怎么样?零基础能学会么?...

扣丁学堂
06/01
0
0
超级绚丽,20款前端动画特效,轰炸你的眼睛

前言 HTML5一个相当出色的web技术,它不仅可以让你更加方便地操纵页面元素,而且可以通过canvas实现更多的动画特效,引进HTML5标准后,CSS3也就可以发挥更大的作用。本文主要介绍了一些基于H...

浪漫程序员
04/25
0
0
HTML5学习之Web Storage基础知识

HTML5 Web 存储 在HTML5 Web Storage还没出来之前,本地存储使用的是 cookie. 但是Web 存储需要更加的安全与快速,这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可...

CHIEMINCHAN
05/11
0
0
分享一个帮助你快速构建HTML5游戏的javascript类库 - CreateJS

日期:2012-4-23 来源:GBin1.com HTML5是一个非常重要的web标准,针对HTML5衍生了很多的富客户端javascript开发类库,今天这里我们将介绍一个非常棒的帮助你开发基于HTML5游戏的类库 - crea...

gbin1
2012/04/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

你为什么在Redis里读到了本应过期的数据

一个事故的故事 晚上睡的正香突然被电话吵醒,对面是开发焦急的声音:我们的程序在访问redis的时候读到了本应过期的key导致整个业务逻辑出了问题,需要马上解决。 看到这里你可能会想:这是不...

IT--小哥
今天
2
0
祝大家节日快乐,阖家幸福! centos GnuTLS 漏洞

yum update -y gnutls 修复了GnuTLS 漏洞。更新到最新 gnutls.x86_64 0:2.12.23-22.el6 版本

yizhichao
昨天
5
0
Scrapy 1.5.0之选择器

构造选择器 Scrapy选择器是通过文本(Text)或 TextResponse 对象构造的 Selector 类的实例。 它根据输入类型自动选择最佳的解析规则(XML vs HTML): >>> from scrapy.selector import Sele...

Eappo_Geng
昨天
4
0
Windows下Git多账号配置,同一电脑多个ssh-key的管理

Windows下Git多账号配置,同一电脑多个ssh-key的管理   这一篇文章是对上一篇文章《Git-TortoiseGit完整配置流程》的拓展,所以需要对上一篇文章有所了解,当然直接往下看也可以,其中也有...

morpheusWB
昨天
5
0
中秋快乐!!!

HiBlock
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部