既然涉及到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. Tomcat集群搭建

    关于如何搭建Tomcat集群网上还是能搜到很多相关的教程,这里结合我自己在实际应用中的操作做下备忘. 案例说明: 这里以在本机部署的2个tomcat来做集群.当然,tomcat集群可以是分布式的,而差 ...

  2. .net 类型转换

    在.net  平台下类型有两种方式可以进行类型转换,强转或as转换.(有的说法是两种方式都进行强转,有两种强转方式). 如:typeA objA = (typeA)objB 或者使用另一种typeA ...

  3. 使用Vue-resource完成交互

    使用vue-resource 引入vue-resource vue-resource就像jQuery里的$.ajax,是用来跟后端交互数据的,vue-resource是vue的一个插件,所以我们在开始 ...

  4. 深入分析Java的内置日志API(java.util.logging)(一)

    简介   任何的软件系统,日志都是非常重要的一部分.良好统一的日志规范会大大提高应用程序的可维护性.可靠性,并进而提高开发效率,指导业务.在早期,Java工程师往往都是利用 System.err.pr ...

  5. 51nod_1831: 小C的游戏（Bash博弈 找规律）

    题目链接 此类博弈不需要考虑sg函数,只需要确定必胜态和必败态,解题思路一般为打败先打表找规律,而后找规律给出统一的公式.打表方式:给定初始条件(此题中为ok[0]=ok[1]=0),然后从低到高枚举 ...

  6. cognos安装和配置即席报表流程

    安装前的配置: 1.  Cognos数据库的创建和用户的创建 注意:字符集需要设置为UTF-8:Cognos用户权限可以给dba: 2.系统上原有JDK的删除(因为Cognos已经自带JDK) 安装- ...

  7. jquery validate bootstrap 错误样式配置

    $().ready(function () { $("#commentForm").validate({ errorPlacement: function (error, elem ...

  8. [BZOJ 1409] Password

    贴一发题面 1409: Password Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 242  Solved: 82[Submit][Status][D ...

  9. global,$GLOBALS[' '] 全局, 浮动float跟margin的注意事项

    $a; global只能声明变量为全局,不能赋值,否则报错未定义:global $a; 相对于$GLOBALS['a'],写法是这样的,所有定义过的变量都存在这里: //浮动float跟margin的 ...

  10. iOS多款源码分享

    iOS精选源码 列表联动,Linkage 电商商品详情 AxcUIKit-控件整合框架,快速简单的使用高级控件 GKNavigationBarViewController-导航栏联动 仿京东的加入购物 ...