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. MongoDB 开机自启动

    MongoDB安装了以后,应当设置开机自启动. 假设启动命令如下: sudo /db/mongodb/265/bin/mongod --config /db/conf/mongodb/mongodb. ...

  2. 加logo

    import cv2 import numpy as np # f0,f1='feiyong.jpg','g3logo.jpg' # # #f1,f0='feiyong.jpg','g3logo.jp ...

  3. ubuntu 查看进程,查看服务

    jiqing@Ubuntu:~$ sudo netstat -anpl | grep :3306 tcp6 0 0 :::3306 :::* LISTEN 1532/mysqld jiqing@Ubu ...

  4. RxJava使用介绍

    主讲人:阳石柏 RxJava基本概念 背压概念介绍 RxJava 2.0版本介绍及更新 一.RxJava基本概念 RxJava 在 GitHub 主页上的自我介绍是 “a library for co ...

  5. 【转】SDK、JDK、JRE、JVM、JDT、CDT等之间的区别与联系 .

    相信大多数java初学者被这些概念搞蒙过,它们之间到底有什么区别,又有什么联系呢?下面我将一一解开大家心中的谜团. 首先,给大家解释一下这些概念: 1.SDK(Software DevelopKit, ...

  6. POJ3090 Visible Lattice Points 欧拉函数

    欧拉函数裸题,直接欧拉函数值乘二加一就行了.具体证明略,反正很简单. 题干: Description A lattice point (x, y) in the first quadrant (x a ...

  7. jquery得到焦点和失去焦点

    鼠标在搜索框中点击的时候里面的文字就消失了,经常会用到搜索框的获得焦点和失去焦点的事件,接下来介绍一下具体代码,感兴趣的朋友额可以参考下   input失去焦点和获得焦点 鼠标在搜索框中点击的时候里面 ...

  8. async 函数-----------------解决异步操作隧道的亮光

    之前也学过,只是没有学好,公司现在用的都是async函数 , 所以决定把它弄懂.最近看了看阮一峰的博客,做下记录. 异步I/O不就是读取一个文件吗,干嘛要搞得这么复杂?异步编程的最高境界,就是根本不用 ...

  9. Sublime Text3 配置 Lua5.3.5开发环境

    所需软件 Sublime Text3 Lua5.3.5 配置过程 解压Lua5.3.5包 官方下载的包内是需要makefile安装的(博主Win10下暂为实现),此处提供自动配置完毕的包:Lua5.3 ...

  10. $luogu2375[NOI2014]$

    \(problem\) 其中,\(next[i],next[next[i]],next[next[next[i]]]......\)都是这个前缀串i的公共前后缀,而且只有它们是公共前后缀 那么,我们其 ...