HTML5技术

web存储之webstorage - Bruceqi

字号+ 作者:H5之家 来源:H5之家 2017-06-19 16:00 我要评论( )

web存储分类 客户端和服务端 认识web存储 随着web应用的发展,是的客户端存储的用途越来越多,然而实现客户端端存储的方式也是越来越多样化。最简单最兼容的方式就是cookie,但作为真正的客户端存储cookie还是存在着许许多多的弊端的。同时,各种浏览器也有

  • web存储分类
  • 客户端和服务端 
  • 认识web存储
  • 随着web应用的发展,是的客户端存储的用途越来越多,然而实现客户端端存储的方式也是越来越多样化。最简单最兼容的方式就是cookie,但作为真正的客户端存储cookie还是存在着许许多多的弊端的。同时,各种浏览器也有属于自己的存储方式。例如,IE6以及以上版本中可以使用userData Behavior,在Firefox中可以使用globalStorage,而在Flash插件还可以使用Flash Local Storage,但是这几种方式存在着兼容性等方面的弊端,对于客户端的存储不属于最好的方式。
  • 由于上述情况,html5中增加的了几种新的存储方式。web Database和web Storage。  
  • 各种方式存储之间的区别
  • cookie的优缺点
  • cookie工作原理
  • cookie作为一种客户端存储的方式,主要采用的是文本存储。当有应用程序使用cookie的时候,服务器会将cookie发送到客户端,客户端进行保存。当用户进行下次访问时,会将客户端存储的cookie发送到服务器上面。在开发中,最典型的案例就是用来存储用户信息。  
  • 优点
  • 缺点 
  • web storage的优缺点
  • 认识webstorage
  • 这是html5新增的客户端存储数据的方式,提供了易于操作的api,只需要设置键值的方式即可。在每个用户域下面存储的数据大小在5M-10M。包含下面的sessionStorage和localStorage。同时,还包括web Database。 
  • 优点
  • 缺点
  • 由于每个域下面存储的数据都是独立的空间,我们在一个域下面是不能使用其他域下面的数据。 
  • 由于数据在没有我们进行主动的删除的情况下,存储的数据是一直保存在的并且数据没进行加密处理,很容易造成数据的窃取。 
  • localStorage
  • localStorage是一种没有时间限制的存储方式,除非我们自己主动的清除数据不然数据是不会丢失的。  
  • sessionStorage 
  • sessionStorage是针对session的存储方式,当我们浏览器或者操作窗口执行了关闭操作,sessionStorage存储的数据将会丢失。同时只能在同一个会话的页面中才能使用。
  • 浏览器支持    
  • IE8.0以上,Firefox3.0以上,opera10.5以上,chrome3.0以上,safari4.0以上。
      
  • 实例代码
  • 检测当前浏览器是否支持
  • <script type="text/javascript"> // 验证当前的浏览器是否支持localStorage和sessionStorage window.onload = function(){ if (window.localStorage && window.sessionStorage) { alert("你的浏览器支持localStorage和sessionStorage"); } } </script>

     

     
  • 基本使用 
  • 注意:localStorage和sessionStorage存储的都是字符串对象。  
  • 创建
  • <script type="text/javascript"> // 创建均使用localStorage做示例,sessionStorage语法方式和localStorage是一样的,localStorage(key, value);或者localStorage.key = "value"; window.onload = function(){ if (window.localStorage) { localStorage.setItem("userName", "张三"); } } </script>

     

        
  • 获取存储
  • <script type="text/javascript"> // 可以直接使用localStorage.getItem(key);也可以使用localStorage.key; window.onload = function(){ if (window.localStorage && window.sessionStorage) { localStorage.setItem("userName", "张三"); alert(localStorage.getItem("userName"));
    } } </script>

     

      
  • 删除存储 
  • <script type="text/javascript"> // localStorage.removeItem(key):根据键名删除指定存储,localStorage.clear():删除指定所有存储,当Storage对象为空时,也是可执行的。 window.onload = function(){ if (window.localStorage && window.sessionStorage) { localStorage.setItem("userName", "hello,world!");
       localStorage.removeItem("userName");
    localStorage.clear(); } } </script>

     

        

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • 本地存储localStroage的用法及示例 - heyujun-

      本地存储localStroage的用法及示例 - heyujun-

      2017-05-09 12:00

    • html5的web存储详解 - Cythia-milk

      html5的web存储详解 - Cythia-milk

      2017-05-04 16:00

    • 前端实现搜索记录功能也就是天猫app历史记录存储方便浏览 - 今天的代码你撸了嘛

      前端实现搜索记录功能也就是天猫app历史记录存储方便浏览 - 今天的代

      2017-04-12 14:00

    • 浓缩的才是精华:浅析GIF格式图片的存储和压缩 - 腾讯云技术社区

      浓缩的才是精华:浅析GIF格式图片的存储和压缩 - 腾讯云技术社区

      2017-04-07 15:08

    网友点评