文档章节

HTML5 本地存储

Aaron_DMC
 Aaron_DMC
发布于 2016/11/21 17:40
字数 797
阅读 298
收藏 3

 

HTML5的本地化存储标准主要有以下3类:

(1) Web Storage 

(2) Web SQL Database  

(3) IndexedDB

 

 

一、Web Storage 

 

Web Storage是目前得到支持最广泛的HTML5本地存储规范,IE 8+、FF 3.5+、Safari 4+、Chrome 4+、Opera 10.5+,以及iPhone 2+和Android 2+都已经支持Web Storage,Web Storage类似于HTML4的cookie,但cookie最大只支持4k,而且每次发起一个新的请求,会自动把该域下的所有cookie都发送到服务端。

 

1. Web Storage的主要有以下特点:

(1) 提供了更大的存储空间。cookie的存储限制在了4k之内, 而Web Storage官方建议为每个网站5MB。

(2) cookie有一个机制,就是在每次客户端请求服务器的时候都会将cookie发送给服务器,这无疑会做很多不必要的操作,因为并不是每次请求服务器都需要cookie的所有信息,而web storage很好的解决了这个问题,它不是采取自动发送的方式,这样就减少了不必要的工作。

(3) Web Storage赋值存储的都是字符串类型的,也就是说如果你要保存数字的话,那么获取到Storage中存储值后需要进行类型转换。

例如:

window.localStorage.setItem('count', 8);  //数值赋值  
      
console.log(window.localStorage.count + 8);  //结果并非16,而是88  
  
console.log(parseInt(window.localStorage.count) + 8);  //须先转换成整数型,再进行相加,结果为16  

 

2. Web Storage包括以下2个存储对象:

2.1  localStorage

localStorage 用于持久化的本地存储,它没有时间限制,除非主动删除数据,否则数据是永远不会过期的。

可以使用以下语句判断浏览器是否支持localStorage:

if (!window.localStorage == false) {
	alert("浏览器支持localStorage");
} else {
	alert("浏览器不支持localStorage,请升级浏览器版本!");
}

localStorage的操作非常简单,常用的方法如下:

(1) window.localStorage.key = value;
(2) window.localStorage.setItem(key, value);
(3) window.localStorage.getItem(key);
(4) window.localStorage.removeItem(key);
(5) window.localStorage.clear();

 

例如:

<script type="text/javascript">
	/*****赋值示例****/
	window.localStorage.uin = 'yunlives'; //赋值  
	window.localStorage.nick = '夜之子';
	//等同于  
	window.localStorage.setItem('uin', 'yunlives'); //赋值  
	window.localStorage.setItem('nick', '夜之子');

	/*****取值示例*****/
	console.log(window.localStorage.uin);
	console.log(window.localStorage.nick);
	//等同于  
	console.log(window.localStorage.getItem('uin'));
	console.log(window.localStorage.getItem('nick'));

	//结合JSON.stringify使用更强大  
	var userObj = {
		'uin': 'yunlives',
		'nick': '夜之子'
	};
	window.localStorage.setItem('user', JSON.stringify(userObj));
	JSON.parse(window.localStorage.getItem('user')).nick; // 结果显示'夜之子'  
	/******移除项******/
	window.localStorage.removeItem('uin');

	/*****清空****/
	window.localStorage.clear();
</script>

NOTE:(1)对于某一个域下来说,local storage是共享的(多个窗口共享)

 

2.2 SessionStorage

SessionStorage 针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除。 

可以使用以下语句判断浏览器是否支持localStorage:

if (!window.sessionStorage == false) {
	alert("浏览器支持sessionStorage");
} else {
	alert("浏览器不支持sessionStorage,请升级浏览器版本!");
}

sessionStorage的使用方法同localStorage,这里省略....

NOTE:(1)sessionStorage所存储数据的生命周期,和Session类似,关闭浏览器(或标签页)后数据就不存在了。但刷新页面或使用“前进”、“后退按钮”后sessionStorage仍然存在。

(2)session storage每个窗口的值都是独立的(每个窗口都有自己的数据),它的数据会随着窗口的关闭而消失,窗口间的sessionStorage也是不可以共享的。

© 著作权归作者所有

Aaron_DMC
粉丝 8
博文 65
码字总数 73707
作品 0
上海
后端工程师
私信 提问
加载中

评论(1)

SFN_HH
SFN_HH
还有其他两种呢
分享6个实用的HTML5本地存储(Local Storage)教程

日期:2011/12/12 来源:GBin1.com HTML5 中最强大并且最具有魅力的特性在于本地存储,使用本地存储可以大大的节约服务器端的压力,并且可以有效的利用客户端的计算性能。使用HTML5可以在客户...

gbin1
2011/12/12
2.9K
1
HTML5-localStorage、sessionStorage用法总结

localStorage和sessionStorage功能 localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。 sessionStorage用于本地存储一个会话(session)中的数据,这些数据只...

iNiL0119
2015/03/21
908
0
localStorage/cookie 用法分析与简单封装

  本地存储是HTML5中提出来的概念,分localStorage和sessionStorage。通过本地存储,web应用程序能够在用户浏览器中对数据进行本地的存储。与 cookie 不同,存储限制要大得多(至少5MB),...

杨小匠
2018/07/16
0
0
html5 sessionStorage 与 localStorage使用详解

html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage。 sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结...

Adam-Lee
2012/08/22
16.8K
1
本地存储—localStorage(HTML5)

localStorage简介 今夜死活睡不着,决定整理下最近搞得localStorage…… 先简单说下阐述下:localStorage 规范:http://dev.w3.org/html5/webstorage/ localStorage用于持久化的本地存储,除...

郏高阳
2013/01/03
14.1K
11

没有更多内容

加载失败,请刷新页面

加载更多

Rust 的 GUI 框架生态概览

本文比较全面比较了目前主流的 Rust 的 GUI 框架的表现。其中 ++ 表示非常好,-- 表示非常差,而 o 表示处于平均水平。 参与对比的框架共有 8 个,详细的比较结果如下: Electron + Neon El...

红薯
33分钟前
4
0
golang微服务框架go-micro 入门笔记2.1 micro工具之micro api

micro api micro 功能非常强大,本文将详细阐述micro api 命令行的功能 重要的事情说3次 本文全部代码https://idea.techidea8.com/open/idea.shtml?id=6 本文全部代码https://idea.techidea8....

非正式解决方案
今天
4
0
Spring Context 你真的懂了吗

今天介绍一下大家常见的一个单词 context 应该怎么去理解,正确的理解它有助于我们学习 spring 以及计算机系统中的其他知识。 1. context 是什么 我们经常在编程中见到 context 这个单词,当...

Java知其所以然
昨天
3
0
Spring Boot + Mybatis-Plus 集成与使用(二)

前言: 本章节介绍MyBatis-Puls的CRUD使用。在开始之前,先简单讲解下上章节关于Spring Boot是如何自动配置MyBatis-Plus。 一、自动配置 当Spring Boot应用从主方法main()启动后,首先加载S...

伴学编程
昨天
7
0
用最通俗的方法讲spring [一] ──── AOP

@[TOC](用最通俗的方法讲spring [一] ──── AOP) 写这个系列的目的(可以跳过不看) 自己写这个系列的目的,是因为自己是个比较笨的人,我曾一度怀疑自己的智商不适合干编程这个行业.因为在我...

小贼贼子
昨天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部