既然涉及到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. Struts 框架 之 文件上传下载案例

    Struts 框架 文件上传 1. 先准备 Struts 环境 (我使用的是struts 2.3.4版本) 导jar包:

  2. Unreal Engine 4 Radiant UI 入门教程（零）在场景中摆放网页

    相关的学习资源: https://forums.unrealengine.com/showthread.php?12097-PLUGIN-RadiantUI-SDK-UIs-HUDs-Interact ...

  3. Javasript 正则匹配任意字符

    今天在写Js匹配任意字符的时候发现使用.不好使,当输入内容有回车的时候就会失效. 后来上网查,发现js的任意字符不包括\n. 本来想写一个trim后长度为10的正则验证,最后使用[\s|\S]来代替任 ...

  4. Win8.1下VM与Hyper-v冲突解决方法

    不需要使用hyperv.去程序那里关闭hyperv.要同时使用两中虚拟机.使用折中的办法:  创建两个启动菜单,在启动的时候选择是否要运行 Hyper-V. 管理员身份运行命令提示符 cmd 输入 b ...

  5. Spring Boot 系列（五）web开发-Thymeleaf、FreeMarker模板引擎

    前面几篇介绍了返回json数据提供良好的RESTful api,下面我们介绍如何把处理完的数据渲染到页面上. Spring Boot 使用模板引擎 Spring Boot 推荐使用Thymeleaf. ...

  6. shell基本语法

    一.变量 1.变量的命名规则:以字母或下划线开头,后面跟数字,字母或下划线,最好不要随便命名,要做到看见变量名能猜出其含义 2.变量赋值: x=100 echo $x 删除变量:unset x 3.定 ...

  7. 初次配置git与github出现push不了的问题

    ssh: connect to host gmail.com port 22: No route to host fatal: Could not read from remote repositor ...

  8. redis 订阅与发布

    PUBLISH,SUBSCRIBE,等命令实现订阅与发布 订阅/发布到频道 订阅/发布到模式   频道的订阅与信息发送   订阅subscribe,可以让客户端订阅任意数量的频道, 每当有新信息发送到 ...

  9. Java 期末考试

    一: 题目:打印出100-999之间所有的"水仙花数",所谓"水仙花数"是指一个三位数,其各位数字立方和等于该数本身.   例如:153是一个"水仙花 ...

  10. tomcat 与 java web中url路径的配置以及使用规则详情（长期更新）

    首先我们看一下在myeclipse中建立的java web项目的结构 在这里我们需要注意这个webroot也就是我们在tomcat里的webapp里面的应用 之所以每一个项目都有这个webroot,是 ...