既然涉及到HTML5知识，那么必定会存在一定的兼容性问题，这里就涉及到浏览器的支持情况了。

　　浏览器支持情况：　

　　Internet Explorer 8+, Firefox, Opera, Chrome, 和 Safari支持Web 存储。

　　注意: Internet Explorer 7 及更早IE版本不支持web 存储.

　　这里涉及到两种方式，即localStorage与sessionStorage

　　（1）、localStorage：

　　localStorage（本地存储）,可以长期存储数据，没有时间限制，一天，一年，两年甚至更长，数据都可以使用。localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。

　　优点：

　　虽然存储大小有限制，但是相对于cookie而言，要大得多。

　　缺点：

　　需要手动删除，否则长期存在
　　浏览器大小不一，版本的支持也不一样
　　localStorage只支持string类型的存储，JSON对象需要转换

　　常见用法有：　

  • 保存数据：localStorage.setItem(key,value);
  • 读取数据：localStorage.getItem(key);
  • 删除单个数据：localStorage.removeItem(key);
  • 删除所有数据：localStorage.clear();
  • 得到某个索引的key：localStorage.key(index);

　　提示: 键/值对通常以字符串存储

　　（2）、sessionStorage：

　　sessionStorage（会话存储），只有在浏览器被关闭之前使用，创建另一个页面时同意可以使用，关闭浏览器之后数据就会消失

　　特点：　

  • 同源策略限制。若想在不同页面之间对同一个sessionStorage进行操作，这些页面必须在同一协议、同一主机名和同一端口下。
  • 只在本地存储。seesionStorage的数据不会跟随HTTP请求一起发送到服务器，只会在本地生效，并在关闭标签页后清除数据
  • 存储方式。seesionStorage的存储方式采用key、value的方式。value的值必须为字符串类型(传入非字符串，也会在存储时转换为字符串。)。
  • 存储上限限制：不同的浏览器存储的上限也不一样，但大多数浏览器把上限限制在5MB以下。

　　用法同localStorage
　　
　　在使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage，如：

　　

if(typeof(Storage)!=="undefined")

{

    // 是的! 支持 localStorage  sessionStorage 对象!

    // 一些代码.....

} else {

    // 抱歉! 不支持 web 存储。

}

　　

　　这里以localStorage为例来说明（例子是直接从别处copy来的，但这不是重点）：

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<script>

　　function clickCounter(){

　　　　if(typeof(Storage)!=="undefined"){

　　　　　　if (localStorage.clickcount){

　　　　　　　　localStorage.clickcount=Number(localStorage.clickcount)+1;

　　　　　　}else{

　　　　　　　　localStorage.clickcount=1;

　　　　　　}
　　　　　　document.getElementById("result").innerHTML=" 你已经点击了按钮 " + localStorage.clickcount + " 次 ";

　　　　}else{
　　　　　　document.getElementById("result").innerHTML="对不起，您的浏览器不支持 web 存储。";

　　　　}

　　}

</script>

</head>

<body>

<p><button onclick="clickCounter()" type="button">点我！</button></p>

<div id="result"></div>

<p>点击该按钮查看计数器的增加。</p>

<p>关闭浏览器选项卡(或窗口),重新打开此页面,计数器将继续计数(不是重置)。</p>

</body>

</html>

　在这里我分别使用了Chrome、Firefox、Safari、QQ、IE（我电脑用的是IE11）、Edge等浏览器来进行测试，发现在Chrome、Firefox、Safari、QQ浏览器上能够实现预期的效果，而在IE与Edge浏览器上则无法达到预期的效果。本来以为浏览器缓存的原因，在清楚缓存后依旧无效，顿时产生了IE浏览器是否支持localStorage的想法，这里以一个小demo来测试下：　

<script>

    if(window.localStorage){

        alert("support")

    }else{

        alert("not support")

    }

</script>

　　

　结果IE浏览器下结果为：　

　　

　　在查资料后发现ie8及以上均支持localStorage，那么问题出在哪儿了，接着我去菜鸟教程上直接copy一个例子，发现情况还是一样，但是我将菜鸟教程上那个例子的链接在各个浏览器上打开发现都可以正常运行，这是怎么回事了，在多方查阅资料后，得出的结论是，IE浏览器下localStorage不支持本地文件，也就是需要在服务器下才支持。为了验证这个结论是否正确，我将这个demo放到tomcat服务器下面，然后在IE浏览器中打开（注意：在IE浏览器下需要输入http://localhost:8080（我的端口号是8080），否则会出错，而在其他浏览器下只需要输入localhost:8080即可），发现竟然能够实现预期的效果。
　　因此，最后得出的结论是：IE浏览器下localStorage不支持本地文件，需要在服务器下才支持；同样，IE浏览器下sessionStorage也不支持本地文件，也需要在服务器下才支持
　　

HTML5 web存储的更多相关文章

  1. HTML5 Web存储(Web Storage)技术及用法

    在如今的Web开发中,HTML5是大家讨论的最大一个话题.HTML5提供的新功能特征使得Web程序员如虎添翼,并免去了以往钻研各种方法来让网站更好.更快.更灵活的气力.这些新功能中有一个非常让我感兴趣 ...

  2. HTML5 web 存储

    简介: HTML5 web 存储,一个比cookie更好的本地存储方式. 首先我们先了解一下: 什么是 HTML5 Web 存储? 使用html5可以在本地存储用户的浏览数据. 早些时候,本地存储使用 ...

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

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

  4. 面试之HTML5 Web存储

    前几天面试遇到了一个题是问localStorage和sessionStorage的区别,当时的回答不是很全面,今天就针对这个问题做一下整理(概念,用法,区别) HTML5 Web存储,一个比 cook ...

  5. HTML5: HTML5 Web 存储

    ylbtech-HTML5: HTML5 Web 存储 1.返回顶部 1. HTML5 Web 存储 HTML5 web 存储,一个比cookie更好的本地存储方式. 什么是 HTML5 Web 存储 ...

  6. 有趣的HTML5 Web 存储

    HTML5 web 存储,一个比cookie更好的本地存储方式. 什么是 HTML5 Web 存储? 使用HTML5可以在本地存储用户的浏览数据. 早些时候,本地存储使用的是 cookie.但是Web ...

  7. 【读书笔记】HTML5 Web存储

    PS:这里讲web存储,主要是在客户端存储的一些技术:cookie,localstorage,sessionstorage,WebSQL.     Cookie   Cookie是HTML4中在客户端 ...

  8. HTML5本地化应用开发-HTML5 Web存储详解

    文章不是简单的的Ctrl C与V,而是一个字一个标点符号慢慢写出来的.我认为这才是是对读者的负责,本教程由技术爱好者成笑笑(博客:http://www.chengxiaoxiao.com/)写作完成. ...

  9. 使用HTML5 Web存储的localStorage和sessionStorage方式

    localStorage(本地存储),可以长期存储数据,没有时间限制,一天,一年,两年甚至更长,数据都可以使用.sessionStorage(会话存储),只有在浏览器被关闭之前使用,创建另一个页面时同 ...

随机推荐

  1. Vue.js 基本功能了解

    一.写在前面 隔了这么久才来出Vue的第二篇文章,真是堕落了,自己先惩罚下/(ㄒoㄒ)/~~ 回过头看自己第一篇相关文章<初试 Vue.js>(http://www.cnblogs.com ...

  2. js 监控iframe URL的变化

    iframe的url可以前端任何地址,这样就可能出现漏洞,如果钓鱼网站通过js把src改成了危险地址,如果没有监控,就会有很大隐患.所以监控iframe的url变化就是必须要解决的问题了. 第一印象的 ...

  3. Bootstrap按钮插件

    前面的话 按钮插件提供了一组可以控制按钮多种状态的功能,比如按钮的禁用状态.正在加载状态.正常状态等.本文将详细介绍Bootstrap按钮插件 加载状态 通过按钮可以设计状态提示,当单击按钮时,会显示 ...

  4. Java Web使用Html5 FormData实现多文件上传

    前一阵子,迭代一个线上的项目,其中有一个图片上传的功能,之前用的ajaxfileupload.js来实现上传的,不过由于ajaxfileupload.js,默认是单文件上传(虽然可以通过修改源码的方法 ...

  5. 在Docker容器中运行.Net Core web Api项目

    安装Docker环境 参考本人这篇<CentOS 7 下Docker的安装>文章进行安装以及环境配置,这里不做赘述. 通过.NetCore开发WebApi项目 1. 创建.Net Core ...

  6. DDD理论学习系列（11）-- 工厂

    DDD理论学习系列--案例及目录 1.引言 在针对大型的复杂领域进行建模时,聚合.实体和值对象之间的依赖关系可能会变得十分复杂.在某个对象中为了确保其依赖对象的有效实例被创建,需要深入了解对象实例化逻 ...

  7. Oozie安装时放置Mysql驱动包的总结（网上最全）

    不多说,直接上干货! 对于在oozie里放置Mysql驱动包的总结 根据网上的参考以及我个人经验安装的使用 (1)放一份到$OOZIE_HOME/libext下 (是 mysql-connector- ...

  8. 【nodejs】nodejs 的linux安装(转)

    (一) 编译好的文件 简单说就是解压后,在bin文件夹中已经存在node以及npm,如果你进入到对应文件的中执行命令行一点问题都没有,不过不是全局的,所以将这个设置为全局就好了. ./node -v ...

  9. dpkg和perl的依赖环境出现错误故障解决（磁盘原因）

    内核: uname -a Linux localhost.localdomain 3.4.29-t4 #12 Wed Mar 13 16:50:15 EST 2013 armv7l armv7l ar ...

  10. Java GC - 监控回收行为与日志分析

    1. 简介 在上一篇介绍<Java GC - 垃圾回收机制>, 本文将介绍如何监控 Javc GC 行为,同时涉及一些GUI工具的使用(虽然有些已经很老并不再更新),监控GC在于判断JVM ...