既然涉及到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. NEWS-包名-baseTest-类名-ConfigManager

    package baseTest; import java.io.IOException;import java.io.InputStream;import java.util.Properties; ...

  2. vue2.0设置proxyTable使用axios进行跨域请求

    这里请求的是知乎日报的api,由@izzyleung这位大神提供的,这是github地址. 在vue-cli构建的项目中先安装axios npm install axios -S 这里暂不考虑用vue ...

  3. Java 用Freemarker完美导出word文档（带图片）

    Java  用Freemarker完美导出word文档(带图片) 前言 最近在项目中,因客户要求,将页面内容(如合同协议)导出成word,在网上翻了好多,感觉太乱了,不过最后还是较好解决了这个问题. ...

  4. js实现存储对象的数据结构hashTable和list

    以下代码是typescript语言来写的,其实和es6面向对象的写法基本一致.大家阅读后都明白这些方法的作用. hash hash结构用于处理和表现类似key/value的键值对,其中key通常可用来 ...

  5. 新篇章之我的java学习之路下

    昨天写下了人生的第一篇博客,今天接着写我的java学习之路有关开发及框架的学习过程. 想要学好java语言,只学习一些java的基本语法对实际开发中的用处还是不大的,所以我们还要掌握一些有关javaW ...

  6. angularjs初窥门径

    貌似angularjs出来之后网上各种夸angularjs的好黑jquery. angularjs大致可以分为几个板块:作用域,控制器,指令(主要),路由,依赖注入. 1 作用域 作用域在angula ...

  7. 【学习笔记】C# 构造和析构

    构造方法 构造方法是一个特殊的方法,负责初始化对象 构造方法名必须和类名一致 构造方法没有返回值,但可以有参数,能够重载 构造方法可以不写,系统会自动为类添加一个无参的默认构造 如果将构造方法设置为P ...

  8. Linux基础（七）

    一.nfs服务 nfs(Network File System)即网络文件系统,它允许网络中的计算机之间通过TCP/IP网络共享资源.常用于Linux系统之间的文件共享. nfs在文件传送过程中依赖r ...

  9. 微信小程序怎么用？线下商家最适合玩小程序

    随着微信小程序不断地释放新功能,许多行业越来越关注小程序,目前已经有不少餐饮和线下传统零售企业开始谋划利用好小程序.但是,线下商业有着复杂的场景,如何针对自己行业的特点和需求开发出属于自己的小程序,是 ...

  10. 【ztree】ztree例子

    <script language="javascript" type="text/javascript" src="js/jquery.js&q ...