首页 > html教程 > 正文

HTML5 storag存储详解

原创 2018-05-16 11:21:01 0 105
本篇文章主要介绍HTML5 storag存储详解,感兴趣的朋友参考下,希望对大家有所帮助。

HTML5storage提供了一种方式让网站能够把信息存储到你本地的计算机上,并再以后需要的时候进行获取。这个概念和cookie相似,区别是它是为了更大容量存储设计的。Cookie的大小是受限的,并且每次你请求一个新的页面的时候cookie都会被发送过去。HTML5storage是存储在你的计算机上,网站在页面加载完毕后可以通过Javascript来获取这些数据。

1sessionStorage

检测

!!window.sessionStorage;

常用方法

.key = value

.setItem(key,value)

.getItem(key)

.removeItem(key)

.clear()

window.sessionStorage.name = 'rainman';           // 赋值  
window.sessionStorage.setItem('name','cnblogs');  // 赋值  
window.sessionStorage.getItem('name');            // 取值  
window.sessionStorage.removeItem('name');         // 移除值  
window.sessionStorage.clear();                    // 删除所有sessionStorage


事件:

window.onstorage

检测值得变化,浏览器支持不好。


说明:



  1. cookie的存储限制在了4k之内,相比来说,session storage有了更大的存储空间,但至于具体多大,这要参照浏览器厂商的具体实现。

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

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

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

  5. setItem中的key、value使用的是字符串的形式进行存储的。也就是说如果有如下的代码:setItem(‘count’, 1);通过getItem(‘count’) + 5 得到的将不是预期的6(整数),而是’16’(字符串)。

  6. 再次使用setItem设置已经存在的key的value时,新的值将替代旧的值。

  7. 当存储中的数据发生改变时,会触发相应的事件(window.onstorage),但目前各浏览器对此事件的支持并不完善,暂时可以忽略。

2localStorage

检测

!!window.localStorage;

方法和sessionStorage相同

说明:

  1. local storage把只把数据存储在了客户端使用,不会发送的服务器上(除非你故意这样做)。

  2. 而且对于某一个域下来说,local storage是共享的(多个窗口共享一个“数据库”)。

  3. localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。

举例

//结合JSON.stringify使用更强大  
var person = {'name': 'rainman', 'age': 24};  
localStorage.setItem("me", JSON.stringify(person));  
JSON.parse(localStorage.getItem('me')).name;    // 'rainman'  
  
/** 
* JSON.stringify,将JSON数据转化为字符串 
*     JSON.stringify({'name': 'fred', 'age': 24});   // '{"name":"fred","age":24}' 
*     JSON.stringify(['a', 'b', 'c']);               // '["a","b","c"]' 
* JSON.parse,反解JSON.stringify 
*     JSON.parse('["a","b","c"]')                    // ["a","b","c"] 
*/


3Database Storage

对简单的数据存储,使用sessionStoragelocalStorage能够很好地完成,但是在对琐碎的关系数据进行处理之外,它就力所不及了。而这正是 HTML 5 Web SQL Database”API 接口的应用所在。

A、打开链接

var db = openDatabase("ToDo", "0.1", "A lalert of to do items.", 200000);    // 打开链接  
if(!db) { alert("Failed to connect to database."); }                         // 检测连接是否创建成功


以上代码创建了一个数据库对象 db,名称是 Todo,版本编号为0.1db 还带有描述信息和大概的大小值。如果需要,这个大小是可以改变的,所以没有必要预先假设允许用户使用多少空间。

绝不可以假设该连接已经成功建立,即使过去对于某个用户它是成功的。为什么一个连接会失败,存在多个原因。也许用户代理出于安全原因拒绝你的访问,也许设备存储有限。面对活跃而快速进化的潜在用户代理,对用户的机器、软件及其能力作出假设是非常不明智的行为。比如,当用户使用手持设备时,他们可自由处置的数据可能只有几兆字节。

B、执行查询


db.transaction( function(tx) {   
            tx.executeSql(  
            "INSERT INTO ToDo (label, timestamp) values(?, ?)",   
            ['lebel', new Date().getTime()],   
            function(tx2, result){ alert('成功'); },   
            function(tx2, error){ alert('失败:' + error.message); }  
            );   
            });


  1. 执行SQL语句使用database.transaction()函数,该函数只有一个参数,负责执行查询的函数。

  2. 该函数具有一个类型事务的参数(tx)。

  3. 该事务参数(tx)具有一个函数:executeSql()。这个函数使用四个参数:
    表示查询的SQL字符串;插入到查询中问号所在处的字符串数据;一个成功时执行的函数;一个失败时执行的函数。

  4. 执行成功的函数有两个参数:tx2,事务性参数;result,执行的返回结果,结构如图

  5. 执行成功的函数也有两个参数:tx2,事务性参数;error,错误对象,结构如图

C、其它

  • Chrome支持; firefox(测试时版本4.01)不支持;IE8不支持。

D、示例

//创建数据库  
var db = openDatabase("users", "1.0", "用户表", 1024 * 1024);   
if(!db){  
	    alert("Failed to connect to database.");   
	} else {  
	    alert("connect to database 'K'.");   
	}  
	  
	// 创建表  
	db.transaction( function(tx) {   
	    tx.executeSql(  
	        "CREATE TABLE IF NOT EXISTS users (id REAL UNIQUE, name TEXT)",   
	        [],   
	        function(){ alert('创建users表成功'); },   
	        function(tx, error){ alert('创建users表失败:' + error.message); }  
	    );  
	});   
	  
	// 插入数据  
	db.transaction(function(tx) {   
	    tx.executeSql(  
	        "INSERT INTO users (id, name) values(?, ?)",   
	        [Math.random(), 'space'],   
	        function(){ alert('插入数据成功'); },   
	        function(tx, error){ alert('插入数据失败: ' + error.message);}  
	    );   
	});   
	  
	// 查询  
	db.transaction( function(tx) {   	    tx.executeSql(  
	        "SELECT * FROM users", [],    
	         function(tx, result) {  
	            var rows = result.rows, length = rows.length, i=0;  
	            for(i; i < length; i++) {   
	                alert(  
	                    'id=' + rows.item(i)['id'] +   
	                    'name='+ rows.item(i)['name']  
	                );   
	            }   
	        },   
	        function(tx, error){  
	            alert('Select Failed: ' + error.message);  
	        }  
	    );   
	});   
	  
	// 删除表  
	db.transaction(function (tx) {    
	    tx.executeSql('DROP TABLE users');   
	    });


4globalStorage

这个也是html5中提出来,在浏览器关闭以后,使用globalStorage存储的信息仍能够保留下来,localStorage一样,域中任何一个页面存储的信息都能被所有的页面共享

基本语法

  • globalStorage['developer.mozilla.org'] —— 在developer.mozilla.org下面所有的子域都可以通过这个命名空间存储对象来进行读和写。

  • globalStorage['mozilla.org'] —— 在mozilla.org域名下面的所有网页都可以通过这个命名空间存储对象来进行读和写。

  • globalStorage['org'] —— 在.org域名下面的所有网页都可以通过这个命名空间存储对象来进行读和写。

  • globalStorage[''] —— 在任何域名下的任何网页都可以通过这个命名空间存储对象来进行读和写

方法属性

  • setItem(key, value) —— 设置或重置 key 值。

  • getItem(key) —— 获取 key 值。

  • removeItem(key) —— 删除 key 值。

  • 设置 key 值:window.globalStorage["planabc.net"].key = value;

  • 获取 key 值:value = window.globalStorage["planabc.net"].key;

其它

  • 过期时间同 localStorage,其它的一些特性也和localStorage相似。

  • 现在Firefox只支持当前域下的globalStorage存储, 如果使用公用域会导致一个这样一个类似的错误“Security error” code: “1000”。

5、兼容性

方法

Chrome

Firefox (Gecko)

Internet Explorer

Opera

Safari (WebKit)

localStorage

4

2

8

10.50

4

sessionStorage

5

2

8

10.50

4

globalStorage

--

2

--

--

--

相关推荐:

vuex+localstorage动态监听storage步骤详解

HTMl5的存储方式sessionStorage和localStorage详解

vuex结合localstorage动态监听storage的变化

以上就是HTML5 storag存储详解的详细内容,更多请关注php中文网其它相关文章!

  • 相关标签:storag html5 h5
  • 本文原创发布php中文网 ,转载请注明出处,感谢您的尊重!
  • 网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论

    独孤九贱(4)_PHP视频教程

    江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 PHP中文网出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

    ThinkPHP5实战之[教学管理系统]

    本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    PHP入门视频教程之一周学会PHP

    所有计算机语言的学习都要从基础开始,《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

    ThinkPHP5快速开发企业站点[全程实录]更新中...

    本课以最新版ThinkPHP5.0.10为基础进行开发,全程实录一个完整企业点,从后台到前台,从控制器到路由的全套完整教程,不论是你是新人,还是有一定开发经验的程序员,都可以从中学到实用的知识~~

    Thinkphp3.2.3个人博客开发

    ThinkPHP是一个快速、开源的轻量级国产PHP开发框架,是业内最流行的PHP框架之一。本课程以博客系统为例,讲述如何使用TP实战开发,从中学习Thinkphp的实践应用。模版下载地址:http:/...

    PHP实战天龙八部之仿爱奇艺电影网站

    本课程是php实战开发课程,以爱奇艺电影网站为蓝本从零开发一个自己的网站。目的是让大家了解真实项目的架构及开发过程

    独孤九贱(3)_JavaScript视频教程

    javascript是运行在浏览器上的脚本语言,连续多年,被评为全球最受欢迎的编程语言。是前端开发必备三大法器中,最具杀伤力。如果前端开发是降龙十八掌,好么javascript就是第18掌:亢龙有悔。...

    独孤九贱(8)_php从零开始开发属于自己的php框架

    本课以一个极简的PHP开发框架为案例,向您展示了一个PHP框架应该具有的基本功能,以及具体的实现方法,让您快速对PHP开发框架的底层实现有一个清楚的认识,为以后学习其实的开发框架打下坚实的基础。

    直播实录:PHP魔鬼训练营[从零开始制作个人博客]

    本站9月直播课已经结束,本套教程是直播实录,没有报上名或者漏听学员福利来了,赶紧看看吧,说不定这里就有你的菜

    2018前端入门_HTML5

    轻松明快,简洁生动,让你快速走入HTML5的世界,体会语义化开发的魅力

    JavaScript极速入门_玉女心经系列

    JavaScript能够称得上是史上使用最广泛的编程语言,也是前端开发必须掌握的三技能之一:描述网页内容的HTML、描述网页样式的CSS以及描述网页行为的JavaScript。本章节将帮助大家迅速掌握...

    独孤九贱(7)_Bootstrap视频教程

    Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。为所有开发者、所有应用场景而设计,它让前端开发更快速、简单,所有开发者都能快速上手...

    独孤九贱(2)_CSS视频教程

    《php.cn独孤九贱(2)-css视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了CSS知识...

    PHP用户注册登录系统视频教程

    《php用户注册登录系统》主要介绍网站的登录注册功能,我们会从最简单的实现登录注册功能开始,增加验证码,cookie验证等,丰富网站的登录注册功能

    独孤九贱(6)_jQuery视频教程

    jQuery是一个快速、简洁的JavaScript框架。设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的...

    PHP学生管理系统视频教程

    《PHP学生管理系统视频教程》主要给大家讲解了HTML,PHP,MySQL之间的相互协作,实现动态的网页显示和获取数据.

    最新微信小程序开发视频教程

    《最新微信小程序开发视频教程》本节课程是由微趋道录制,讲述了如何申请一个微信小程序,以及开发中需要使用哪些工具,和需要注意哪些等。

    弹指间学会HTML视频教程

    《弹指间学会HTML视频教程》从最基本的概念开始讲起,步步深入,带领大家学习HTML,了解各种常用标签的意义以及基本用法,学习HTML知识为以后的学习打下基础

    • 墨辰丷

      全栈工程师

    • 认证0级讲师
    • 2058篇
      文章总数
    • 105
      文章总浏览数

    头条

    推荐视频教程

  • javascript初级视频教程
  • jquery 基础视频教程
  • javascript三级联动视频教程
  • 独孤九贱(3)_JavaScript视频教程
  • 独孤九贱(6)_jQuery视频教程
  • 最新更新