localStorage、sessionStorage

  既然涉及到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也不支持本地文件,也需要在服务器下才支持

原文地址:https://www.cnblogs.com/sunjuncoder/p/9895707.html

时间: 2024-08-12 21:34:57

localStorage、sessionStorage的相关文章

cookie、session、localStorage、sessionStorage区别

cookie.session 会话(Session)跟踪是Web程序中常用的技术,用来跟踪用户的整个会话.常用的会话跟踪技术是Cookie与Session.Cookie通过在客户端记录信息确定用户身份,Session通过在服务器端记录信息确定用户身份. 本章将系统地讲述Cookie与Session机制,并比较说明什么时候不能用Cookie,什么时候不能用Session. cookie 1.1  Cookie机制 在程序中,会话跟踪是很重要的事情.理论上,一个用户的所有请求操作都应该属于同一个会话

本地存储(localStorage、sessionStorage、web Database)

一.sessionStorage和localStorage sessionStorage和localStorage两种方法都是当用户在inPut文本框中输入内容并点击保存数据按钮时保存数据,点击读取数据按钮时读取保存后的数据.不过使用sessionStorage时,只能局限于当前页面,如果关闭浏览器,数据就会丢失,下次打开浏览器就会读不到数据.如果使用localStorage时,即使浏览器关闭,下次打开浏览器仍能读取到上次被保存的数据.但是数据的保存时按不同浏览器分别进行的,也就是说,如果打开别

浏览器本地储存方式有哪些?cookie、localStorage、sessionStorage

现阶段,浏览器提供的储存方式常用的有三种,cookie.localStorage.sessionStorage 1.cookie 概念:cookie 是浏览器中用于保存少量信息的一个对象 基本特征: 1)以域名为单位的,每个网站的cookie都保存在此网站的域名下,当下一次访问该网站的时候,就可以通过cookie访问保存的消息 2)每个浏览器保存cookie的位置不同,都保存在浏览器内部,可以通过相应的操作查看 3)每个浏览器保存cookie的数量限制不同,一般每个网站下不大于50个,不大于4k

(转)HTML5开发学习(2):本地存储之localStorage 、sessionStorage、globalStorage

原文:http://www.cnblogs.com/xumingxiang/archive/2012/03/25/2416386.html HTML5开发学习(2):本地存储之localStorage .sessionStorage.globalStorage   Posted on 2012-03-25 11:23 祥叔 阅读(2) 评论(0)  编辑 收藏 HTML5 提供了四种在客户端存储数据的新方法,即 localStorage .sessionStorage.globalStorage

cookie、session、localStorage、sessionStorage的区别

cookie的机制 cookie是存储在用户本地终端上的数据.有时也用cookies,指某些网站为了辨别用户身份,进行session跟踪而存储在本地终端上的数据,通常经过加密. Cookie是服务器发给客户端的特殊信息,cookie是以文本的方式保存在客户端,每次请求一个新的页面的时候cookie都会被发送过去. cookie的内容主要包括:名字.值.过期时间.路径和域.路径与域一起构成cookie的作用范围.若不设置时间,则表示这个cookie的生命期为浏览器会话期间,关闭浏览器窗口,cook

深入了解浏览器存储:对比Cookie、LocalStorage、sessionStorage与IndexedDB

摘要: 对比Cookie.LocalStorage.sessionStorage与IndexedDB 作者:浪里行舟 Fundebug经授权转载,版权归原作者所有. 前言 随着移动网络的发展与演化,我们手机上现在除了有原生 App,还能跑"WebApp"--它即开即用,用完即走.一个优秀的 WebApp 甚至可以拥有和原生 App 媲美的功能和体验.WebApp 优异的性能表现,有一部分原因要归功于浏览器存储技术的提升.cookie存储数据的功能已经很难满足开发所需,逐渐被WebSto

localstorage、 sessionstorage、 cookie|刘景照的博客

客户端常用的存储方式有三种: localstorage sessionstorage cookie localStorage和sessionStorage localStorage localStorage 没有时间限制的数据存储,也就是说, localStorage是永远不会过期的,除非主动删除数据. 数据可跨越多个窗口,无视当前会话,在同一个域中 被共同访问.使用. localStorage.myName = 'liujingzhao'; localStorage['myName'] = '

localStorage、sessionStorage和cookie的区别

本地客户端(浏览器)查看三者信息: HTML4的本地存储:cookie 浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式,可以利用cookie,session等根服务端进行数据交互. 一.cookie 和 session cookie 和 session都是用来跟踪浏览器用户身份的会话方式. 区别: 保持状态:cookie保存在客户端(浏览器),session保存在服务器端 使用方式: cookie机制:如果不在浏览器中设置过期时间,cookie被保存在内存中,生命周期随浏览器的关闭而结

HTML5本地存储localStorage、sessionStorage及IE专属UserData

By:王美建 from:http://www.cnblogs.com/wangmeijian/p/4518606.html 转载请保留署名和出处! 在客户端存储数据用的最普遍的方式非cookie莫属,随着HTML5的普及,新的本地存储方式localStorage和sessionStorage将在标准浏览器上大展身手.localStorage和sessionStorage是HTML5的新特性之一,说是新特性,其实微软公司早在IE8上就已经支持localStorage和sessionStorage这

浅析localstorage、sessionstorage

原文链接:http://caibaojian.com/localstorage-sessionstorage.html 简介 html5 中的 web Storage 包括了两种存储方式:sessionStorage 和 localStorage. sessionStorage 用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问,会话结束后数据也随之销毁.localStorage 用于存储一个域名下的需要永久存在在本地的数据,这些数据可以被一直访问,直到这些