谈谈HTML5本地存储——WebStorage

转载 2018年04月16日 08:42:28
  • 浏览器本地存储概述 
    简介 
    cookie 

    cookie是指某些网站为了辨别用户身份、进行 session 跟踪而储存在用户本地终端上的数据(通常经过加密)。


    webStorage 

    webStorage是HTML5中本地存储的解决方案之一,包括sessionStorag和localStorage,两者差别就差在生命周期的不同而已。


    三者对比 

    类型 
    生命周期 
    存储大小 
    与服务器通信 
    作用域 


    Cookie 
    一般由服务器生成,可设置过期时间,默认是关闭浏览器后失效 
    4k左右 
    可每次携带在http头部中,但保存过多数据会带来性能问题 
    可通过.setDomain设置主域名共享 
    localStorage 
    永久保存,除非被清除 
    5m左右 
    只能存储在浏览器端 
    子域名之间相互独立 
    sessionStorage 
    仅存在当前标签页下,关闭浏览器或者新建标签页都为空 
    5m左右 
    只能存储在浏览器端 
    不同tab之间无法共享 

    【tip】sessionStorage只能在一个标签页下共享,即如果你从当前标签页下新打开一个该网页的页面,sessionStorage数据也是清空的。不过如果你恢复关闭的页面的话,在chrome和firefox下sessionStorage也会被恢复,不过safari不会。


    webStorage的兼容性 


    Chrome 
    Firefox 
    IE 
    Opera 
    Safari 


    localStorage 

    3.5 

    10.50 

    sessionStorage 



    10.50 


    基本浏览器都是支持的


    webStorage API 

    localStorage和sessionStorage的用法是一样的,下面展示sessionStorage的使用例子。


    // 保存数据到sessionStorage 
    sessionStorage.setItem('key', 'value'); 
    // 从sessionStorage获取数据 
    var data = sessionStorage.getItem('key'); 
    // 从sessionStorage删除保存的数据 
    sessionStorage.removeItem('key'); 
    // 从sessionStorage删除所有保存的数据 
    sessionStorage.clear(); 
    //枚举sessionStorage的方法 
    for(var i=0;i<sessionStorage.length;i++){ 
    var key = sessionStorage.key(i); 
    var value =sessionStorage.getItem(key); 


    当然,你也可以直接用对象的赋值方式来设置


    sessionStorage['colorSetting'] = '#a4509b'; 
    sessionStorage.setItem('colorSetting', '#a4509b'); 

    不过,官方建议只用webStorage API(getItem, removeItem, key, length),来避免使用对象键值存储的一些缺陷,缺陷详情请点击 这里


    storage事件 

    webStorage还有storage事件。当storage发生改变,storage事件就会被触发。


    这里的的条件是数据发生了变化,如果当前的存储区域是空的,即使再调用clear()也不会触发事件。或者你通过setItem()来设置一个与现有值相同的值,事件也是不会触发的。


    storage 属性 

    属性名 
    描述 


    key 
    代表属性名发生变化.当被clear()方法清除之后所有属性名变为null. Read only(只读). 
    newValue 
    新添加进的值.当被clear()方法执行过或者被属性名被删除,值会成为null Read only(只读). 
    oldValue 
    原始值.被clear()方法执行过则变为null,或者被新值取代。 Read only(只读). 
    storageArea 
    被操作的storage对象. Read only(只读). 
    url 
    key发生改变的对象所对应的文档的URL地址.。 Read only(只读). 

    下面介绍多标签页面使用sessionStorage时会有使用栗子。


    多标签页面使用sessionStorage 

    在最近使用vuejs写完全前后端分离的项目时,在做登录认证的时候,在想到底怎么存储用户认证信息。


    因为系统安全要求等级比较高,要求用户关闭标签页的时候会话立刻到期,使用cookie来保存敏感的token就不太合适了。如果使用localstorage,页面关闭后localstorage数据还在,也不太满足要求。


    想着只能使用sessionStorage。


    不过尴尬的是,使用sessionStorage是无法再多标签页面共享的。每次打开新标签页,就会跳转到登录页面,用户体验不太友好,查了一下资料,看到一博客是翻译了一外国小哥使用storage事件实现跨标签页共享sessionStorage的文章,学习了,点击 这里看该博客 。


    简单来讲就是,如果新标签页如果没有sessionStorage数据,就会触发一个localstorage修改事件,那么在已存在的标签里收到这个事件后,就会将当前页的sessionStorage数据保存在localstorage中,但是马上移除。但是在新标签页里会监听到该事件,可以获取到这个sessionStorage数据,那这样就保证了新标签页也能获取sessionStorage,也保证localstorage中不存在token信息。


    (function(){ 
    if (!sessionStorage.length) { 
    // 如果当前页没有sessionStorage数据,就触发一个事件。 
    localStorage.setItem('getSessionStorage', Date.now()); 
    }; 
    window.addEventListener('storage', function(event){ 
    //console.log('storage event', event); 
    if (event.key == 'getSessionStorage') { 
    // 已存在的标签页收到该事件后,讲sessionStorage数据存到localstorage中,并马上移除。 
    localStorage.setItem('sessionStorage', JSON.stringify(sessionStorage)); 
    localStorage.removeItem('sessionStorage'); 
    } else if (event.key == 'sessionStorage' &;&; !sessionStorage.length) { 
    // 新标签页会在这里监听到事件,通过newValue这个属性获取当时存储在localstorage的sessionStorage数据 
    var data = JSON.parse(event.newValue),value; 
    console.log(data,"111"); 
    for (key in data) { 
    sessionStorage.setItem(key, data[key]); 


    }); 
    })(); 

    参考


    http://blog.kazaff.me/2016/09/09/%E8%AF%91-%E5%9C%A8%E5%A4%9A%E4%B8%AA%E6%A0%87%E7%AD%BE%E9%A1%B5%E4%B9%8B%E9%97%B4%E5%85%B1%E4%BA%ABsessionStorage/?utm_source=tuicool&;utm_medium=referral


    https://blog.guya.net/2015/06/12/sharing-sessionstorage-between-tabs-for-secure-multi-tab-authentication/


    https://developer.mozilla.org/zh-CN/docs/Web/API/Window/sessionStorage 

以上是谈谈HTML5本地存储——WebStorage的内容,更多 WebStorage 谈谈 存储 本地 html5 的内容,请您使用右上方搜索功能获取相关信息。

本地存储之WebStorage

HTML5中与本地存储相关的两个重要内容:Web Storage与本地数据库。其中,Web Storage存储机制是对HTML4中cookie存储机制的一个改善。由于cookie存储机制有很多缺点,H...
  • xiaozhi_2016
  • xiaozhi_2016
  • 2016-09-02 18:16:58
  • 597

谈谈h5 WebStorage的那点事儿

WebStorage是HTML5中本地存储的解决方案之一,在HTML5引入WebStorage这个概念之前,浏览器兼容的本地存储方案就只有使用cookie。有人可能就会问,既然有了cookie本地存储...
  • yq_oxygen
  • yq_oxygen
  • 2016-07-14 22:43:19
  • 1949

html5 WebStorage本地存储

====================================================== 注:本文源代码点此下载 =============================...
  • javazhuanzai
  • javazhuanzai
  • 2012-01-16 02:53:47
  • 223

html5本地存储-WebStorage

Html5本地存储有两种方式 第一种为WebStorage 第二种为Web SQL Database 本节当中主要介绍WebStorage WebStorage提供了两种存储类型的API接口:sess...
  • baohanqing
  • baohanqing
  • 2013-12-30 20:45:10
  • 491

html5本地存储webstorage

webstorage存储技术                     function MyClick() {             var userName = $("#txtUserNam...
  • softuse
  • softuse
  • 2016-05-13 16:05:18
  • 368

HTML5 本地缓存 webStorage sessionStorage localStorage

webStorage是HTML5本地缓存,大家都听过cookie本地缓存,那为什么不用cookie而引用webStorage呢?cookie的缺点:1、数据大小:作为存储容器,cookie 的大小限制...
  • Hhy_9288
  • Hhy_9288
  • 2017-11-03 15:41:41
  • 132

HTML5本地储存--利用storage事件实时监听Web Storage

在事件处理函数中,触发事件的事件对象(event参数值)具有如下几个属性 event.key 属性:属性值为在 session 或 localStorage 中被修改的数据键值。 event...
  • sinat_19327991
  • sinat_19327991
  • 2017-06-16 14:17:51
  • 2062

HTML5-WebStorage学习笔记

最近一直在研究HTML5的一些新的特性,买了本书,然后也看了看W3C上的讲解,干脆就把学习的笔记写在博客中跟大家一起分享下。 HTML5本地存储规范中,定义了2个重要的API:WebStor...
  • MinSnake816
  • MinSnake816
  • 2012-11-06 11:00:41
  • 735

谈谈cookie和webStorage

前言这个问题面试官经常会问,一般人也都能答出些东西,但是我想说这里水很深,特别是对cookie的理解和运用上,太有讲究了。【浅层】webStoragehtml5中的Web Storage包括了两种存储...
  • u011413061
  • u011413061
  • 2015-11-28 11:54:06
  • 1817
收藏助手
不良信息举报
您举报文章:谈谈HTML5本地存储——WebStorage
举报原因:
原因补充:

(最多只允许输入30个字)