既然涉及到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. springmvc+mybatis 做分页sql 语句

    <?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE mapperPUBLIC "-// ...

  2. App的前后台数据同步

    前言 在开发一个点餐软件时,app的订单数据是使用本地Sqlite数据库,在提交订单数据后,当订单数据在后台(Mysql数据库)发生变化时(如:已买单),本地数据如何改变呢? 思路 前台在查询时,将后 ...

  3. Ubuntu14.04设置开机自启动程序

    启动应用程序可以帮助我们选择开机启动项.但是在Ubuntu14.04通过Dash输入startup 找不到启动应用程序了,可以通过在控制台输入以下内容: gnome-session-propertie ...

  4. Android - 多语言自动适配

    Android为多语言适配提供了很大的方便.开发者不需要在代码中进行修改.只需要配置xml文件. res --> values 其中存放有xml文件.一般这些都是英文的字符串.我们可以存放其他语 ...

  5. Linux 显示文本指定行内容

    主要采用sed.head和tail命令 如果文本中使用了 \n 这类符号,cat命令会把它当成换行符,结果会出错 $ sed -n "10p" move.sh   # 显示第10行 ...

  6. Java设计模式之模板方法设计模式(银行计息案例)

    不知道为什么,这几天对Java中的设计模式非常感兴趣,恰巧呢这几天公司的开发任务还不算太多,趁着有时间昨天又把模板方法模式深入学习了一下,做了一个客户在不同银行计息的小案例,感触颇深,今天给各位分享一 ...

  7. （转）Linux下增加交换分区的大小

    场景:最近在Linux环境安装ELK相关软件时候发现机器特别的卡,所以就查看了Linux机器的内存使用情况,发现是内存和交换分区空间太小了. 对于虚拟机中的内存问题,可以直接通过更改虚拟机的硬件进行解 ...

  8. (转)java提高篇(一)-----理解java的三大特性之封装

    从大二接触java开始,到现在也差不多三个年头了.从最基础的HTML.CSS到最后的SSH自己都是一步一个脚印走出来的,其中开心过.失落过.寂寞过.虽然是半道出家但是经过自己的努力也算是完成了“学业” ...

  9. (转)Java线程：新特征-条件变量

    Java线程:新特征-条件变量   条件变量是Java5线程中很重要的一个概念,顾名思义,条件变量就是表示条件的一种变量.但是必须说明,这里的条件是没有实际含义的,仅仅是个标记而已,并且条件的含义往往 ...

  10. ES6中的模块

    前面的话 JS用"共享一切"的方法加载代码,这是该语言中最容出错且容易令人感到困惑的地方.其他语言使用诸如包这样的概念来定义代码作用域,但在ES6以前,在应用程序的每一个JS中定义 ...