• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > html5本地存储storage实例详解

html5本地存储storage实例详解

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含html5,本地存储,storage等相关知识,匿名希望在学习及工作中可以帮助到您
HTML5storage提供了一种方式让网站能够把信息存储到你本地的计算机上,并再以后需要的时候进行获取。这个概念和cookie相似,区别是它是为了更大容量存储设计的。Cookie的大小是受限的,并且每次你请求一个新的页面的时候cookie都会被发送过去。HTML5的storage是存储在你的计算机上,网站在页面加载完毕后可以通过Javascript来获取这些数据。

1、sessionStorage

检测

!!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),但目前各浏览器对此事件的支持并不完善,暂时可以忽略。

2、localStorage

检测

!!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"]  
*/

3、Database Storage

对简单的数据存储,使用sessionStorage和localStorage能够很好地完成,但是在对琐碎的关系数据进行处理之外,它就力所不及了。而这正是 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.1。db 还带有描述信息和大概的大小值。如果需要,这个大小是可以改变的,所以没有必要预先假设允许用户使用多少空间。

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

您可能想查找下面的文章:

  • HTML5知识点总结
  • HTML5的本地存储
  • HTML5本地存储之IndexedDB
  • Html5实现文件异步上传功能
  • Html5新标签datalist实现输入框与后台数据库数据的动态匹配
  • 详解HTML5 window.postMessage与跨域
  • HTML5拖放API实现拖放排序的实例代码
  • 解决html5中video标签无法播放mp4问题的办法
  • HTML5新特性 多线程(Worker SharedWorker)
  • Html5新增标签有哪些

相关文章

  • 2018-12-03w3c是怎样规定<meta>标签的 到底有没有结束的斜杠?
  • 2017-08-06html5版canvas自由拼图实例
  • 2018-12-03基于HTML5 WebGL实现的3D机房
  • 2017-08-06HTML5画渐变背景图片并自动下载实现步骤
  • 2017-08-06HTML5实现一个能够移动的小坦克示例代码
  • 2017-08-06HTML5 离线应用之打造零请求、无流量网站的解决方法
  • 2018-12-03React Native 之ScrollView轮播图实现方法实例
  • 2018-12-03H5的存储方式详解
  • 2018-12-03html5 web本地存储将取代我们的cookie_html5教程技巧
  • 2018-12-03一个有 15 个页面的项目怎么规范 css 样式?

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • Canvas处理图片的方法
    • 如何解决table标签和col标签的一系列问题?
    • html5实现canvas阴影效果示例
    • HTML5在a标签内放置块级元素示例代码
    • HTML5之SVG 2D入门8—文档结构及相关元素总结
    • html5播放视频教程
    • HTML5中canvas的使用总结
    • HTML5 canvas画布详解(二)
    • html5在输入框添加语音输入功能
    • 避免常见的六种HTML5错误用法 (1)

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有