# localStorage sessionStorage ## 基本使用 set 用于设置相关数值 ~~~ localStorage.name = 'ggbond'; localStorage["name"] = "ggbond"; localStorage.setItem("name","ggbond"); ~~~ get 用于获取相关数值 ~~~ var name = localStorage["name"]; var name = localStorage.name; var name = localStorage.getItem("name"); ~~~ ## 与cookie的对比 | |cookie | localstorage | sessionstorage| | --- | --- | --- | --- | | 生命周期 | 在服务器端生成可以设置失效时间，在浏览器端生成一般在关闭浏览器时失效 | 除非被清除否则永久有效 | 在当前会话有效，关闭会话或浏览器时失效 | | 数据大小 | 4kb | 5MB |5MB | | 与服务器端通信 | 在http头中参与通信 | 浏览器本地，不参与通信 | 浏览器本地，不参与通信 | ## sessionStorage跨标签 ~~~ (function() { if (!sessionStorage.length) { // 这个调用能触发目标事件，从而达到共享数据的目的 localStorage.setItem('getSessionStorage', Date.now()); }; // 该事件是核心 window.addEventListener('storage', function(event) { if (event.key == 'getSessionStorage') { // 已存在的标签页会收到这个事件 localStorage.setItem('sessionStorage', JSON.stringify(sessionStorage)); localStorage.removeItem('sessionStorage'); } else if (event.key == 'sessionStorage' && !sessionStorage.length) { // 新开启的标签页会收到这个事件 var data = JSON.parse(event.newValue), value; for (key in data) { sessionStorage.setItem(key, data[key]); } } }); })(); ~~~