H5提供了两种在客户端存储数据的方式:
localStorage 持久化的本地存储(浏览器关闭重新打开数据依然存在)
sessionStorage 针对一个session的本地存储
之前这些都是由cookie来完成的,cookie的特点是存储量小,在服务器和客户端之间来回传递,传输效率不高。一般可以在判断注册的用户是否登录该本网站。
webStorage API 继承于Window对象,并提供了两个新的属性-Window.localStorage 和 Window.sessionStorage.
webStorage的优势:

  1. 相比cookie存储容量增加
  2. 可以将请求的表单数据存于本地,减少http请求,节约带宽
  3. webStorage拥有易用的API

webStorage的局限性:

  1. 不同浏览器webStorage 和LocalStorage的大小不统一。
  2. 在浏览器的隐私模式下面是不可读取的
  3. 本质上是对字符串的读取,因此存储内容过多时页面会变卡
  4. 不能被爬虫抓取到

使用webStorage
1.存储数据:
  localStorage.name = 'value';
  localStorage['name'] = 'value';
  localStorage.setItem('name','value');
  注意键和值总是字符串。建议使用webStorage API(setItem,getItem,removeItem,key,length)
2.获取数据:
  var value = localStorage.getItem('name');
  var value = localStorage.name;
  var value = localStorage['name'];
3.删除数据:
  清空所有数据
    localStorage.clear();
  删除特定数据;
    localStorage.removeItem('name');
4.检测浏览器是否支持:
  function storageAvailable(type) {
    try {
      var storage = window[type],
      x = '__storage_test__';
      storage.setItem(x, x);
      storage.removeItem(x);
      return true;
    }
    catch(e) {
      return false;
    }
  }
  if (storageAvailable('localStorage')) {
    // Yippee! We can use localStorage awesomeness
  }
  else {
    // Too bad, no localStorage for us
  }
5.就是存储对象了,我们需要进行转换为字符串存入,等到使用的时候取出再转为对象。
  var str = JSON.stringify(obj);
  localStorage.mydata = str;
  var obj = JSON.parse(localStorage.mydata);

6.监听 storage 事件

可以通过监听 window 对象的 storage 事件并指定其事件处理函数,当页面中对 localStorage 或 sessionStorage 进行修改时,则会触发对应的处理函数。

window.addEventListener('storage',function(e){
    console.log('key='+e.key+',oldValue='+e.oldValue+',newValue='+e.newValue);
})
触发事件的时间对象(e 参数值)有几个属性:

key : 键值。
oldValue : 被修改前的值。
newValue : 被修改后的值。
url : 页面url。
storageArea : 被修改的 storage 对象。
注意:在谷歌浏览器中,需要在不同标签页中修改 storage 才会触发该事件,即 网页A 监听该事件,在 网页B 中修改 localStorage,则 网页A 会触发事件函数。但是在 IE 中,在同个网页修改 localStorage 都会触发该事件。

调试

谷歌浏览器自带调试工具(chrome devtools)非常好用,可以用来调试 localStorage 和
sessionStorage。打开浏览器按f12调出调试工具,可以看到 Application ,点击打开可以看到左边栏有
Storage,包括了
localStorage、sessionStorage、IndexedDB等,选中我们要调试的网站域名,可以看到右边有对应的 key 和
value,可以通过右键进行编辑或删除等。

兼容

IE8 以上就兼容,但是比较特别,需要在服务器上打开的才支持,直接双击打开文件的 file:// 是不兼容的。

到了 IE11 才支持 file:// 下打开的,其他浏览器的支持程度都很高,包括在手机上的兼容。具体兼容可查看:http://caniuse.com/#search=localstorage

H5 web存储的更多相关文章

  1. H5 web 存储之 Webstorage

    H5提供了两种在客户端存储数据的方式:localStorage 持久化的本地存储(浏览器关闭重新打开数据依然存在)sessionStorage 针对一个session的本地存储之前这些都是由cooki ...

  2. 08. Web大前端时代之:HTML5+CSS3入门系列~H5 Web存储

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html  

  3. H5本地存储技术

    H5 Web存储技术 前言 web存储技术在初期的时候被定义为HTML5的一部分作为其API.后来被独立出来作为一份独立的标准. web存储标准包含localStorage对象和sessionStor ...

  4. Atitit.h5 web webview性能提升解决方案-----fileStrore缓存离线存储+http方案

    Atitit.h5 web webview性能提升解决方案-----fileStrore缓存离线存储+http方案 1. 业务场景 android+webview h5 css背景图性能提升1 2. ...

  5. H5本地存储详细使用教程(localStorage + JSON数据存储应用框架)

    一.Web Storage教程 1.概述: 对于Web Storage来说,实际上是Cookies存储的进化版.如果了解Cookie的人几乎一看Web Storage就会用,如果你从来没用过没了解过C ...

  6. 从零开始学 Web 之 HTML5(四)拖拽接口,Web存储,自定义播放器

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  7. HTML5 Web存储 页面间进行传值

    在实际使用过程中,经常会遇到需要在页面间进行传值的情况,最初设想一定需要后端才能进行数据的存储和读取,或者在本地使用一个cookie进行保存,直到了解到HTML5 Web存储 使用HTML5的新特性可 ...

  8. h5 本地存储

    H5本地存储有两个API,一个是Web Storage,还有一个是Web SQL.不管是哪一个,都是基于JavaScript语言来使用,接下来我就教你怎么使用H5本地存储,本文篇幅较大,JS代码较多, ...

  9. H5本地存储(转)

    H5本地存储  一.本地存储由来的背景         众所周知Html4时代Cookie的大小.格式.存储数据格式等限制,网站应用如果想在浏览器端存储用户的部分信息,那么只能借助于Cookie.但是 ...

随机推荐

  1. 初探C++运算符重载学习笔记<2> 重载为友元函数

    初探C++运算符重载学习笔记 在上面那篇博客中,写了将运算符重载为普通函数或类的成员函数这两种情况. 以下的两种情况发生.则我们须要将运算符重载为类的友元函数 <1>成员函数不能满足要求 ...

  2. ListView布局之View复用原理举例

    1.简单介绍: ListView是android开发中经常使用的控件,系统自带的那些样式,我就不列举了. 今天主要看一下.一个模仿系统历史通话记录的ListView. 效果例如以下: 上面ListVi ...

  3. 桌面系统集成WEB认证系统方案

    最近做的一个项目,有WEB版.WPF版.手机版.领导想集成集团的一个现成的认证系统,姑且称这个认证系统名为 W4认证系统. W4认证系统有如下特点: 1.现成的 2.是个单点登录系统 3.不支持oAu ...

  4. 【RAID在数据库存储上的应用 】

    随着单块磁盘在数据安全.性能.容量上呈现出的局限,磁盘阵列(Redundant Arrays of Inexpensive/Independent Disks,RAID)出现了,RAID把多块独立的磁 ...

  5. PCB 脱离IIS的Web应用

    在用.net Web编程中,我们写好的Web应用首选会挂在IIS上面,因为它足稳定并且功能齐全,但这不是我们唯一的选择,微软给我们提供了Owin组件,Web应该的宿主可以不再是IIS了,有了Owin后 ...

  6. Boost(1.69.0) windows入门(译)

    目录 Boost windows入门 1. 获得Boost源代码 2. Boost源代码组织 The Boost Distribution 3. 仅用头文件的库 Header-Only Librari ...

  7. JavaScript--二维数组

    一维数组,我们看成一组盒子,每个盒子只能放一个内容. 一维数组的表示: myarray[ ] 二维数组,我们看成一组盒子,不过每个盒子里还可以放多个盒子. 二维数组的表示: myarray[ ][ ] ...

  8. linux如何更改yum源

    更改linux yum源方法:第一步:进入yum配置文件目录:cd /etc/yum.repos.d/第二步:备份配置文件(如果后续出现了问题就可以恢复):mv CentOS-Base.repo Ce ...

  9. 笨拙而诡异的 Oracle(之二)

    有一张表,很多数据:   想取某个月的数据.初始的想法很简单,根据日期(RQ)形成条件即可:  符合条件的记录数是 129835,但耗时太长:14.515 秒(RQ字段是做过索引的)!直观的反应是 O ...

  10. UIPickerView的应用

    UIPickerView 是一个选择器控件, 它可以生成单列的选择器,也可生成多列的选择器.UIPickerView 直接继承了 UIView ,没有继承 UIControl ,因此,它不能像 UIC ...