nicenote/public/sessionStorage-localStotage-AND-cookies.html
2018-07-13 19:29:18 +08:00

1133 lines
67 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html style="display: none;" lang="zh">
<head>
<meta charset="utf-8">
<!--
© Material Theme
https://github.com/viosey/hexo-theme-material
Version: 1.4.0 -->
<script>window.materialVersion = "1.4.0"</script>
<!-- Title -->
<title>
sessionStorage localStotage AND cookies |
Feax&#39;s Blog
</title>
<!-- dns prefetch -->
<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="https://cdn1.lncld.net/static/js/av-core-mini-0.6.1.js"/>
<!-- Meta & Info -->
<meta http-equiv="X-UA-Compatible">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="theme-color" content="#0097A7">
<meta name="author" content="Feax">
<meta name="description" itemprop="description" content="web全栈工程师,摇滚,vue,vuex,react,webpack,git,koa2">
<meta name="keywords" content="web全栈工程师,摇滚,vue,vuex,react,webpack,git,koa2,sessionStorage,localStotage,cookies">
<!-- Site Verification -->
<!-- Favicons -->
<link rel="icon shortcut" type="image/ico" href="/img/favicon.png">
<link rel="icon" sizes="192x192" href="/img/favicon.png">
<link rel="apple-touch-icon" href="/img/favicon.png">
<!--iOS -->
<meta name="apple-mobile-web-app-title" content="Title">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="480">
<!-- Add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Feax&#39;s Blog">
<!-- The Open Graph protocol -->
<meta property="og:url" content="http://blog.jzxer.cn">
<meta property="og:type" content="blog">
<meta property="og:title" content="sessionStorage localStotage AND cookies | Feax&#39;s Blog">
<meta property="og:image" content="/img/favicon.png" />
<meta property="og:description" content="web全栈工程师,摇滚,vue,vuex,react,webpack,git,koa2">
<meta property="og:article:tag" content="sessionStorage"> <meta property="og:article:tag" content="localStotage"> <meta property="og:article:tag" content="cookies">
<meta property="article:published_time" content="8月 16, 2017" />
<meta property="article:modified_time" content="5月 25, 2018" />
<!-- The Twitter Card protocol -->
<meta name="twitter:title" content="sessionStorage localStotage AND cookies | Feax&#39;s Blog">
<meta name="twitter:description" content="web全栈工程师,摇滚,vue,vuex,react,webpack,git,koa2">
<meta name="twitter:image" content="/img/favicon.png">
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:url" content="http://blog.jzxer.cn" />
<!-- Add canonical link for SEO -->
<link rel="canonical" href="http://blog.jzxer.cn/sessionStorage-localStotage-AND-cookies.html" />
<!-- Structured-data for SEO -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"publisher": {
"@type": "Organization",
"name": "Feax&#39;s Blog",
"logo": "/img/favicon.png"
},
"author": {
"@type": "Person",
"name": "Feax",
"image": {
"@type": "ImageObject",
"url": "/img/favicon.png"
},
"description": "对的,坚持!错的,放弃!"
},
"headline": "sessionStorage localStotage AND cookies",
"url": "http://blog.jzxer.cn/sessionStorage-localStotage-AND-cookies.html",
"datePublished": "8月 16, 2017",
"dateModified": "5月 25, 2018",
"description": "web全栈工程师,摇滚,vue,vuex,react,webpack,git,koa2",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "http://blog.jzxer.cn"
}
}
</script>
<!--[if lte IE 9]>
<link rel="stylesheet" href="/css/ie-blocker.css">
<script src="/js/ie-blocker.zhCN.js"></script>
<![endif]-->
<!-- Import lsloader -->
<script>(function(){window.lsloader={jsRunSequence:[],jsnamemap:{},cssnamemap:{}};lsloader.removeLS=function(key){try{localStorage.removeItem(key)}catch(e){}};lsloader.setLS=function(key,val){try{localStorage.setItem(key,val)}catch(e){}};lsloader.getLS=function(key){var val="";try{val=localStorage.getItem(key)}catch(e){val=""}return val};versionString="/*"+materialVersion+"*/";lsloader.clean=function(){try{var keys=[];for(var i=0;i<localStorage.length;i++){keys.push(localStorage.key(i))}keys.forEach(function(key){var data=lsloader.getLS(key);if(data&&data.indexOf(versionString)===-1){lsloader.removeLS(key)}})}catch(e){}};lsloader.clean();lsloader.load=function(jsname,jspath,cssonload){cssonload=cssonload||function(){};var code;code=this.getLS(jsname);if(code&&code.indexOf(versionString)===-1){this.removeLS(jsname);this.requestResource(jsname,jspath,cssonload);return}if(code){var versionNumber=code.split(versionString)[0];if(versionNumber!=jspath){console.log("reload:"+jspath);this.removeLS(jsname);this.requestResource(jsname,jspath,cssonload);return}code=code.split(versionString)[1];if(/\.js?.+$/.test(versionNumber)){this.jsRunSequence.push({name:jsname,code:code});this.runjs(jspath,jsname,code)}else{document.getElementById(jsname).appendChild(document.createTextNode(code));cssonload()}}else{this.requestResource(jsname,jspath,cssonload)}};lsloader.requestResource=function(name,path,cssonload){var that=this;if(/\.js?.+$/.test(path)){this.iojs(path,name,function(path,name,code){that.setLS(name,path+versionString+code);that.runjs(path,name,code)})}else if(/\.css?.+$/.test(path)){this.iocss(path,name,function(code){document.getElementById(name).appendChild(document.createTextNode(code));that.setLS(name,path+versionString+code)},cssonload)}};lsloader.iojs=function(path,jsname,callback){var that=this;that.jsRunSequence.push({name:jsname,code:""});try{var xhr=new XMLHttpRequest;xhr.open("get",path,true);xhr.onreadystatechange=function(){if(xhr.readyState==4){if(xhr.status>=200&&xhr.status<300||xhr.status==304){if(xhr.response!=""){callback(path,jsname,xhr.response);return}}that.jsfallback(path,jsname)}};xhr.send(null)}catch(e){that.jsfallback(path,jsname)}};lsloader.iocss=function(path,jsname,callback,cssonload){var that=this;try{var xhr=new XMLHttpRequest;xhr.open("get",path,true);xhr.onreadystatechange=function(){if(xhr.readyState==4){if(xhr.status>=200&&xhr.status<300||xhr.status==304){if(xhr.response!=""){callback(xhr.response);cssonload();return}}that.cssfallback(path,jsname,cssonload)}};xhr.send(null)}catch(e){that.cssfallback(path,jsname,cssonload)}};lsloader.iofonts=function(path,jsname,callback,cssonload){var that=this;try{var xhr=new XMLHttpRequest;xhr.open("get",path,true);xhr.onreadystatechange=function(){if(xhr.readyState==4){if(xhr.status>=200&&xhr.status<300||xhr.status==304){if(xhr.response!=""){callback(xhr.response);cssonload();return}}that.cssfallback(path,jsname,cssonload)}};xhr.send(null)}catch(e){that.cssfallback(path,jsname,cssonload)}};lsloader.runjs=function(path,name,code){if(!!name&&!!code){for(var k in this.jsRunSequence){if(this.jsRunSequence[k].name==name){this.jsRunSequence[k].code=code}}}if(!!this.jsRunSequence[0]&&!!this.jsRunSequence[0].code&&this.jsRunSequence[0].status!="failed"){var script=document.createElement("script");script.appendChild(document.createTextNode(this.jsRunSequence[0].code));script.type="text/javascript";document.getElementsByTagName("head")[0].appendChild(script);this.jsRunSequence.shift();if(this.jsRunSequence.length>0){this.runjs()}}else if(!!this.jsRunSequence[0]&&this.jsRunSequence[0].status=="failed"){var that=this;var script=document.createElement("script");script.src=this.jsRunSequence[0].path;script.type="text/javascript";this.jsRunSequence[0].status="loading";script.onload=function(){that.jsRunSequence.shift();if(that.jsRunSequence.length>0){that.runjs()}};document.body.appendChild(script)}};lsloader.tagLoad=function(path,name){this.jsRunSequence.push({name:name,code:"",path:path,status:"failed"});this.runjs()};lsloader.jsfallback=function(path,name){if(!!this.jsnamemap[name]){return}else{this.jsnamemap[name]=name}for(var k in this.jsRunSequence){if(this.jsRunSequence[k].name==name){this.jsRunSequence[k].code="";this.jsRunSequence[k].status="failed";this.jsRunSequence[k].path=path}}this.runjs()};lsloader.cssfallback=function(path,name,cssonload){if(!!this.cssnamemap[name]){return}else{this.cssnamemap[name]=1}var link=document.createElement("link");link.type="text/css";link.href=path;link.rel="stylesheet";link.onload=link.onerror=cssonload;var root=document.getElementsByTagName("script")[0];root.parentNode.insertBefore(link,root)};lsloader.runInlineScript=function(scriptId,codeId){var code=document.getElementById(codeId).innerText;this.jsRunSequence.push({name:scriptId,code:code});this.runjs()};lsloader.loadCombo=function(jslist){var updateList="";var requestingModules={};for(var k in jslist){var LS=this.getLS(jslist[k].name);if(!!LS){var version=LS.split(versionString)[0];var code=LS.split(versionString)[1]}else{var version=""}if(version==jslist[k].path){this.jsRunSequence.push({name:jslist[k].name,code:code,path:jslist[k].path})}else{this.jsRunSequence.push({name:jslist[k].name,code:null,path:jslist[k].path,status:"comboloading"});requestingModules[jslist[k].name]=true;updateList+=(updateList==""?"":";")+jslist[k].path}}var that=this;if(!!updateList){var xhr=new XMLHttpRequest;xhr.open("get",combo+updateList,true);xhr.onreadystatechange=function(){if(xhr.readyState==4){if(xhr.status>=200&&xhr.status<300||xhr.status==304){if(xhr.response!=""){that.runCombo(xhr.response,requestingModules);return}}else{for(var i in that.jsRunSequence){if(requestingModules[that.jsRunSequence[i].name]){that.jsRunSequence[i].status="failed"}}that.runjs()}}};xhr.send(null)}this.runjs()};lsloader.runCombo=function(comboCode,requestingModules){comboCode=comboCode.split("/*combojs*/");comboCode.shift();for(var k in this.jsRunSequence){if(!!requestingModules[this.jsRunSequence[k].name]&&!!comboCode[0]){this.jsRunSequence[k].status="comboJS";this.jsRunSequence[k].code=comboCode[0];this.setLS(this.jsRunSequence[k].name,this.jsRunSequence[k].path+versionString+comboCode[0]);comboCode.shift()}}this.runjs()}})();</script>
<!-- Import CSS & jQuery -->
<style id="css/material.min.css"></style><script>if(typeof window.lsLoadCSSMaxNums === "undefined")window.lsLoadCSSMaxNums = 0;window.lsLoadCSSMaxNums++;lsloader.load("css/material.min.css","/css/material.min.css?fJTiM/K1J3dWIruo3pxtAw==",function(){if(typeof window.lsLoadCSSNums === "undefined")window.lsLoadCSSNums = 0;window.lsLoadCSSNums++;if(window.lsLoadCSSNums == window.lsLoadCSSMaxNums)document.documentElement.style.display="";})</script>
<style id="css/style.min.css"></style><script>if(typeof window.lsLoadCSSMaxNums === "undefined")window.lsLoadCSSMaxNums = 0;window.lsLoadCSSMaxNums++;lsloader.load("css/style.min.css","/css/style.min.css?oCSEO3ST+aEypEwttTDI9g==",function(){if(typeof window.lsLoadCSSNums === "undefined")window.lsLoadCSSNums = 0;window.lsLoadCSSNums++;if(window.lsLoadCSSNums == window.lsLoadCSSMaxNums)document.documentElement.style.display="";})</script>
<style>
.footer-sns-facebook {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgY2xhc3M9Imljb24iIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiPjxwYXRoIGQ9Ik0xMzguNiA3OGMtMjIuNCA1LjItNTUuOCA0MC4yLTYwLjYgNjMuNC0xLjQgNi40LTIgMTI5LjgtMS42IDM2Ny42LjYgMjk4LjYgMSAzNTguOCAzLjQgMzYzIDExIDIwLjIgMjEuNiAzMi40IDM3LjIgNDMgMTUgMTAuMiAxNy40IDExLjIgMzMgMTMgMTEuMiAxLjQgMTM2IDIgMzY1IDEuNiAzMTQtLjYgMzQ4LjYtMSAzNTUtMy44IDE1LjgtNy4yIDMzLjgtMjIgNDMuMi0zNS40IDUuMi03LjQgMTAuOC0xNi42IDEyLjYtMjAuNCAyLjgtNi40IDMuMi00MC44IDMuOC0zNTQgLjQtMjIzLS4yLTM1My40LTEuNC0zNjUtMi0xNy0yLjYtMTguNi0xMy0zNC04LjYtMTIuNi0xNC4yLTE4LjQtMjUuMi0yNS44LTcuOC01LjQtMTcuNC0xMS0yMS42LTEyLjQtNi0yLjItNzIuOC0yLjYtMzY1LjQtMi42LTE5Ni44LjItMzYxIC44LTM2NC40IDEuOHptNjU3LjYgODcuOGw0LjggMy44djU1LjJjMCA1NC42IDAgNTUuMi00LjYgNTkuNi00LjQgNC40LTYgNC42LTUwLjIgNS42bC00NS42IDEtNy4yIDUuNmMtMTAuNCA4LTE2LjggMTcuMi0xOS4yIDI3LjQtMSA1LTEuOCAyNC44LTEuOCA0NCAuMiAzOCAxLjYgNDQuNiAxMC44IDQ4IDIuOCAxLjIgMjguNCAyIDU2LjggMiA0Ny44IDAgNTIgLjIgNTYuMiAzLjhsNC44IDMuOHY1NS4yYzAgNTQuNiAwIDU1LjItNC42IDU5LjYtNC40IDQuNi01LjQgNC42LTU3IDUuMi0yOC44LjItNTQuNC44LTU2LjggMS40LTIuNC42LTUuNiAzLTYuOCA1LjQtMS44IDMuMi0yLjQgNDEuNC0yLjYgMTQzLjJsLS4yIDEzOC44LTUuNiA0LjgtNS42IDQuOEg2MDljLTUyLjQgMC01Mi44IDAtNTguMi00LjZsLTUuNC00LjYtLjItMTQwLjYtLjItMTQwLjYtNC44LTMuOGMtNC4yLTMuNC04LTMuOC0zNS42LTMuOC0zMi44IDAtNDEtMS44LTQzLjYtMTAtLjYtMi4yLTEuMi0yNS40LTEuMi01MS40IDAtNjAuOC0uMi01NyAzLjQtNjEuNiAyLjgtMy42IDYtNCAzNy44LTUgMzMtMSAzNS4yLTEuMiAzOS40LTUuNiA0LjYtNC40IDQuNi01LjIgNS44LTcxIDEuMi03My40LjItNjcuMiAxNi42LTk5LjQgOC0xNS44IDEyLjgtMjIgMjgtMzcgMTUuMi0xNS4yIDIxLjQtMTkuNiAzOC4yLTI4IDExLTUuNCAyNC0xMSAyOS0xMi4yIDYuMi0xLjggMjguNi0yLjYgNzEuMi0yLjYgNTguNi0uMiA2Mi42IDAgNjcgMy42eiIvPjwvc3ZnPg==);
}
.footer-sns-twitter {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgY2xhc3M9Imljb24iIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiPjxwYXRoIGQ9Ik0xMzguNiA3OGMtMjIuNCA1LjItNTUuOCA0MC4yLTYwLjYgNjMuNC0xLjQgNi40LTIgMTI5LjgtMS42IDM2Ny42LjYgMjk4LjYgMSAzNTguOCAzLjQgMzYzIDExIDIwLjIgMjEuNiAzMi40IDM3LjIgNDMgMTUgMTAuMiAxNy40IDExLjIgMzMgMTMgMTEuMiAxLjQgMTM2IDIgMzY1IDEuNiAzMTQtLjYgMzQ4LjYtMSAzNTUtMy44IDE1LjgtNy4yIDMzLjgtMjIgNDMuMi0zNS40IDUuMi03LjQgMTAuOC0xNi42IDEyLjYtMjAuNCAyLjgtNi40IDMuMi00MC44IDMuOC0zNTQgLjQtMjIzLS4yLTM1My40LTEuNC0zNjUtMi0xNy0yLjYtMTguNi0xMy0zNC04LjYtMTIuNi0xNC4yLTE4LjQtMjUuMi0yNS44LTcuOC01LjQtMTcuNC0xMS0yMS42LTEyLjQtNi0yLjItNzIuOC0yLjYtMzY1LjQtMi42LTE5Ni44LjItMzYxIC44LTM2NC40IDEuOHptNTMyLjggMjA1YzEwIDQgMjMgMTAuOCAyOC44IDE1LjIgMTIuNiA5LjIgMTYuNiAxMC42IDI5LjQgOS40IDYuNi0uNiAxMy0zLjIgMjAuNC04LjIgMTEuMi03LjYgMTkuNC05LjIgMjMuNi01IDMuNiAzLjYgMi44IDktMi44IDE4LjYtNy4yIDEyLjQtNiAxOC44IDQuMiAyNC4yIDQuNCAyLjIgOC4yIDUuNiA4LjYgNy40IDEgNC44LTEyLjYgMjQuMi0yMiAzMS44LTExLjggOS4yLTE3LjIgMjIuNi0xOS42IDQ3LjgtNC44IDUwLjQtNy44IDY2LjYtMTYuNCA4NS40LTMgNy03IDE3LjgtOC44IDI0LTEuOCA2LjQtNSAxNC42LTcuNCAxOC40LTIuMiAzLjgtNy40IDEzLTExLjQgMjAuNC0xNy4yIDMwLjgtNDMuNCA2MS40LTcxLjQgODMuOC0yNS42IDIwLjQtNDYgMzMuMi02NC4yIDQwLjItOC40IDMuMi0xOCA3LjYtMjEuNCA5LjYtNy40IDQuNi0yMi40IDguNi01Ny4yIDE1LTYyLjIgMTEuNi03OS4yIDExLjQtMTM1LjYtMS0zMi40LTctMzguNi05LTUyLTE2LjgtMjEuNC0xMi42LTI0LjItMTQuOC0yNC4yLTE5LjQgMC02LjIgMTAuMi05LjIgMzUtMTAuNCAyMi40LTEgMjguNi0yLjYgNTctMTQuMiAyMy44LTkuOCAyOS40LTEyLjggMzAuNC0xNi44IDIuMi04LjItMy0xMy4yLTI2LjgtMjUuNC0yNS44LTEzLjItMzIuMi0xOC40LTQzLjgtMzUuOC05LTEzLjYtMTAtMjEuMi0zLjYtMzMuNiA1LjQtMTAuOCAzLjYtMTUtMTEuOC0yNS40LTktNi0xNC0xMS42LTIwLjgtMjIuNi0yMy40LTM3LjgtMjUtNTAuOC03LjItNTkuOCA0LjgtMi40IDkuNC01LjQgMTAuMi02LjYgMi44LTQuMi0uNC0xNS42LTguNC0yOS0xMS42LTE5LjYtMTMuMi0yNS44LTEzLjItNTUuMiAwLTI4LjggMi42LTM3LjggMTItNDAuMiA5LTIuMiAxNC44IDEgMzUuNiAyMC4yIDI0LjggMjIuOCA0My42IDM2LjYgNjIuOCA0NS44IDggMy44IDE3LjggOS4yIDIyIDEyIDQuMiAyLjggMTQuOCA3IDIzLjQgOS4yIDguNiAyLjIgMjQuMiA2LjggMzQuOCAxMC4yIDEzLjQgNC40IDIzLjYgNi40IDMzIDYuNiAxMi44LjIgMTQuMi0uMiAxOC42LTUuNCA0LTQuOCA0LjgtNy44IDQuOC0xOS4yIDAtMTQuNCA1LjYtMzkuNiAxMS4yLTUwLjYgNC4yLTguNCAyOS4yLTM0LjIgMzkuOC00MS40IDcuOC01LjQgMzUuNi0xNiA1Mi0yMCAxNC4yLTMuNiAzMi42LTEuMiA1Mi40IDYuOHoiLz48L3N2Zz4=);
}
.footer-sns-gplus {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgY2xhc3M9Imljb24iIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiPjxwYXRoIGQ9Ik0xMzguNiA3OGMtMjIuNCA1LjItNTUuOCA0MC4yLTYwLjYgNjMuNC0xLjQgNi40LTIgMTI5LjgtMS42IDM2Ny42LjYgMjk4LjYgMSAzNTguOCAzLjQgMzYzIDExIDIwLjIgMjEuNiAzMi40IDM3LjIgNDMgMTUgMTAuMiAxNy40IDExLjIgMzMgMTMgMTEuMiAxLjQgMTM2IDIgMzY1IDEuNiAzMTQtLjYgMzQ4LjYtMSAzNTUtMy44IDE1LjgtNy4yIDMzLjgtMjIgNDMuMi0zNS40IDUuMi03LjQgMTAuOC0xNi42IDEyLjYtMjAuNCAyLjgtNi40IDMuMi00MC44IDMuOC0zNTQgLjQtMjIzLS4yLTM1My40LTEuNC0zNjUtMi0xNy0yLjYtMTguNi0xMy0zNC04LjYtMTIuNi0xNC4yLTE4LjQtMjUuMi0yNS44LTcuOC01LjQtMTcuNC0xMS0yMS42LTEyLjQtNi0yLjItNzIuOC0yLjYtMzY1LjQtMi42LTE5Ni44LjItMzYxIC44LTM2NC40IDEuOHpNNDMwIDI5NS40YzQwLjYgMTUuNCA1Ni42IDIzLjggNzIuNiAzOC40IDYuOCA2LjIgNy4yIDE1LjIgMSAyMy40LTYuMiA4LTMzLjYgMzMuOC0zOSAzNi42LTUuNiAyLjgtMTcuNiAyLjgtMjMuMi0uMi0yLjQtMS4yLTguMi01LjItMTMtOC44LTExLjItOC42LTI0LjYtMTEuMi01NS4yLTExLjItMjcuNCAwLTQwLjYgMi42LTUyLjIgMTAuNC00LjQgMi44LTEyLjIgNy42LTE3LjIgMTAuNi0yMyAxMy4yLTUxLjQgNTUtNTUuOCA4Mi40LTIuNiAxNS42LTIuNCAzNC44LjIgNTEgMi44IDE3LjQgMTkuOCA0OC44IDM1LjIgNjUuMiAxNiAxNi42IDQ1IDMzLjYgNjIuOCAzNi42IDI2LjggNC40IDY1LjggMS42IDc5LjQtNS44IDIwLjYtMTEuNCAzMS0xOSA0MS0zMC40IDE4LjgtMjEuNiAyMy40LTM0LjIgMTUuNi00My44LTMuOC00LjgtNC40LTQuOC01MS01LjgtNjAuOC0xLjItNTYuMiAyLjItNTYuMi00My4yIDAtMzIuNC4yLTMzLjIgNC44LTM3IDQuNC0zLjYgOS0zLjggOTItMy44IDc5IDAgODcuOC40IDk0LjIgMy42IDExLjIgNS42IDEzIDExLjQgMTIuOCA0My40IDAgMjUuNC0uOCAzMC44LTcuNiA1OC00IDE2LjYtOS44IDM0LTEyLjYgMzktMi44IDUtOC4yIDE0LjItMTEuNiAyMC42LTguNCAxNS40LTI3LjIgMzYuOC00MC44IDQ2LjYtNS44IDQuNC0xMy44IDEwLjItMTcuNiAxMy4yLTMuOCAzLTExIDctMTYuMiA4LjgtNS4yIDEuOC0xNi4yIDYuNC0yNC40IDEwLTIyLjQgOS42LTM0LjggMTEuNi03MyAxMS42LTM3LjYuMi00Ny0xLjQtNzEtMTItOC4yLTMuNi0xNy42LTcuMi0yMC44LTgtMTUuOC0zLjgtNjctNDUuMi03Ny44LTYyLjgtMi4yLTMuOC03LjYtMTEuNi0xMS44LTE3LjItNC4yLTUuNC05LTE0LTEwLjYtMTktMS44LTQuOC02LjItMTYtMTAtMjQuOC0zLjYtOC44LTcuOC0yMi4yLTkuMi0yOS42LTMuMi0xOC44LTEuNC03OS40IDIuOC05MS40IDEzLjgtNDAuNiAzNS42LTc4IDU4LjgtMTAwLjIgMTQtMTMuNiA0Ny4yLTM2LjQgNTgtMzkuOCA0LjItMS40IDEzLjQtNS4yIDIwLjYtOC40IDIyLTEwIDMyLjgtMTEuNiA3Ni0xMSAzMy44LjYgNDAuNCAxLjIgNTAgNC44em0zNDAuOCA4MC44YzggMy42IDkuNiAxMS4yIDkuMiAzOS4yLS42IDM0LjQtLjYgMzQgNSAzOS42IDQuOCA1IDUuNCA1IDM3LjYgNSA0My40IDAgNDQuNC44IDQzLjIgMzYuMi0uOCAxNy0xLjIgMTguNC02LjQgMjMtNS40IDQuNi02LjYgNC44LTM3LjYgNC44LTMxLjIgMC0zMiAuMi0zNi44IDUtNS42IDUuNC01LjYgNC40LTUgNDEuMi40IDI2LjQuMiAyNy40LTQuNiAzMy00LjggNS42LTYgNS44LTI0LjQgNi40LTIwLjguOC0yOS42LTEuNC0zMy40LTguNC0xLjQtMi42LTItMTUuNi0xLjgtMzUuNi40LTMxLjIuNC0zMS42LTQuNi0zNi42cy01LjYtNS0zNi01Yy0xOC44IDAtMzMtLjgtMzYtMi4yLTcuNi0zLjYtOS42LTExLjItOC44LTMzLjguOC0yOC4yLjQtMjggNDEtMjggNDUuNCAwIDQ1LjQgMCA0NC42LTQyLjYtLjYtMzMtLjYtMzMgNS0zOC40IDQuNC00LjYgNi4yLTUgMjQuOC01IDExIDAgMjIuMiAxIDI1IDIuMnoiLz48L3N2Zz4=);
}
.footer-sns-weibo {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgY2xhc3M9Imljb24iIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiPjxwYXRoIGQ9Ik0xMzUuMiA3OWMtOC42IDMtMjIuOCAxMi40LTMyLjggMjEuOC04LjIgNy44LTIyLjIgMzEtMjQuNiA0MC42LTEgNC4yLTEuNiAxNjctMS42IDM2NC42IDAgMjg0LjguNCAzNTguNCAyLjYgMzY0IDEuNCAzLjggNi44IDEzIDEyIDIwLjQgOC44IDEyLjggMjQgMjUuNCA0MS44IDM1IDYgMy40IDI3IDMuNiAzNjcuNCAzLjYgMjg2LjIgMCAzNjIuNi0uNiAzNjktMi42IDE5LjgtNi4yIDUxLjItMzcuNiA1Ny40LTU3LjQgMi02LjQgMi42LTgyLjYgMi42LTM2OFYxNDFsLTQuMi05Yy0xMS42LTI0LTM5LjItNDkuOC01OC4yLTU0LjItNC4yLTEtMTY4LjYtMS42LTM2NS42LTEuNi0zMDAgMC0zNTkuMi40LTM2NS44IDIuOHptNTU4LjYgMTY5YzguNiAxLjIgMTYuNCA0IDI0IDguNiA2LjIgMy42IDE1LjIgOC4yIDIwLjIgMTAuMiA1LjggMi4yIDE0LjYgOC44IDI1IDE4LjggMjUuNCAyNC44IDMyLjggMzQuOCAzNy44IDUxIDIuNiA4IDcuNCAxOS44IDEwLjggMjYuNCA3LjggMTQuNiAxMS42IDQyLjYgOS40IDY5LTEgMTQuMi0yLjIgMTguNi03LjQgMjYuNC0zLjIgNS4yLTkgMTIuMi0xMi44IDE1LjYtMTMuOCAxMi0zNCA1LjgtMzguOC0xMi0xLjYtNi0xLjQtMTEuNCAxLjItMjMuNCA0LjItMjAgMy00Ni0yLjYtNTguNi0yLjItNS04LTEyLjYtMTIuOC0xNi44LTQuOC00LjItMTQuNi0xNi40LTIxLjgtMjYuOC03LjItMTAuNi0xNS4yLTIwLjgtMTgtMjIuOC0yLjgtMi0xMi42LTYtMjItOS0xNC40LTQuNC0yMC44LTUuNC00My01LjYtMjgtLjItMzEuNC0xLjItNDIuNC0xMS42LTcuNC03LTguNi0xNS42LTMuOC0yNS4yIDctMTMuMiAxNi40LTE2IDU0LjItMTYgMTYuNiAwIDM1LjguOCA0Mi44IDEuOHptLTIxMy42IDc1LjZjMjAuMiAxNS40IDIwLjYgMTYuNCAyMiA0OCAuNiAxNSAxLjggMjkgMi42IDMxIDIuOCA2LjIgMTEgNi42IDIxLjYuNiA1LjQtMy4yIDE0LTUuOCAyMC02LjQgNS44LS42IDE4LjgtMi40IDI5LTQuMiAxNy4yLTMgMTkuNC0zIDM2IC40IDMyIDYuNiAzNS44IDkuMiA0NC4yIDMxLjYgNS4yIDE0IDUuNCAyMS40IDEuMiAzMi44LTIuMiA1LjQtMi44IDExLTIgMTUuNCAxLjggMTAgMTcuNiAyMy40IDM1IDMwLjIgMTEuMiA0LjIgMTYuMiA3LjYgMjcgMTkgMTkuMiAxOS44IDIwLjIgMjMgMjAgNTktLjIgMzUtLjQgMzUuNC0xOS44IDYzLjYtMTMuOCAxOS44LTMyLjQgMzguNi00OSA1MC01IDMuNC0xMi4yIDguOC0xNS44IDEyLTMuOCAzLjItMTEuNiA4LTE3LjIgMTAuNC01LjYgMi42LTE0LjYgNy40LTE5LjggMTAuNi01LjIgMy40LTE1LjggNy42LTIzLjggOS40LTggMi0yMS4yIDYuNi0yOS42IDEwLjItMjIuNCAxMC0zNi4yIDExLjItMTIxLjggMTAuNGwtNzUtLjYtMTktOC40Yy0xMC42LTQuNi0yNS40LTkuOC0zMy0xMS42LTcuNi0xLjYtMTgtNS44LTIzLTlzLTE0LjItOC0yMC40LTEwLjhjLTE4LTgtNTkuNC00Ni4yLTY2LTYxLjItMi4yLTUtNy40LTE0LjQtMTEuNC0yMC44bC03LjItMTJWNTQ5bDcuNi0xMy42YzQuMi03LjQgOS40LTE4LjYgMTEuNi0yNC44IDMuOC0xMS40IDEzLjQtMjcuOCAyNC44LTQyLjYgMjAuMi0yNi4yIDM4LjQtNDYuOCA1My02MCA5LjItOC4yIDIxLTE4LjYgMjYtMjMuMiA1LTQuNCAxMy4yLTExIDE4LjYtMTQuNiA1LjItMy40IDkuNC03LjIgOS40LTggMC0xIDUuNi00LjYgMTIuNi04LjIgNi44LTMuOCAxNi40LTkuNiAyMS40LTEzLjIgNS0zLjYgMTQuNC04IDIxLTkuOCA2LjYtMiAxNy44LTYuNiAyNS0xMC4yIDEyLTYuMiAxNC40LTYuOCAzMi40LTYuOGgxOS40bDEyLjQgOS42em0yMDMuNiAxMy4yYzMgMS42IDYuNiA0LjQgOCA2IDEuNiAxLjggOS40IDcgMTcuNCAxMS42IDE3IDkuNiAxOSAxMyAyNCA0MiAzLjQgMjAuNCAyLjYgMzIuMi0zLjQgNDMuOC03LjYgMTUuMi0yMi44IDIwLjYtMzEuMiAxMS4yLTctNy42LTkuMi0xMy44LTEwLjYtMjkuNi0xLjItMTMuMi0yLjQtMTYuNC05LjYtMjcuMi0xMS0xNi0xNi44LTIwLjYtMjcuMi0yMC42LTEwIDAtMjQtNi4yLTI3LTExLjYtNS44LTEwLjguNC0yNC42IDEyLjQtMjguNCA4LjYtMi42IDQwLjItLjggNDcuMiAyLjh6Ii8+PHBhdGggZD0iTTQyNCA0NzcuNGMtMzIuNiAzLjYtNDcuOCA3LTYxLjggMTMuOC04IDQtMTkgOC40LTI0LjIgMTAtNS4yIDEuNi0xMi40IDUtMTYuMiA3LjgtMy44IDIuNi0xMSA3LjYtMTYuMiAxMS0xMy40IDguOC0zNSAzMy4yLTM4LjggNDQtMS44IDUtNS40IDE0LjQtOC4yIDIxLTguOCAyMS4yLTguMiAyNi44IDQgNTMgMTAuNiAyMi42IDExIDIzLjIgMjcuNiAzNi40IDIxIDE2LjggMjMuNiAxOC40IDUwLjggMjguMiAyMC4yIDcuMiAyNC42IDggNTQgMTAgMTcuNiAxLjIgNDUuNiAyLjIgNjIgMi4ybDMwIC4yIDE3LjQtOC40YzkuNi00LjYgMjIuNC05LjYgMjguMi0xMS40IDYtMS44IDE1LjQtNi4yIDIwLjgtMTAgNS40LTMuNiAxMy40LTguNiAxNy42LTEwLjggOS4yLTQuNiAzOS0zNC40IDM5LTM5IDAtMS42IDMuOC0xMC4yIDguNC0xOC44IDcuOC0xNC4yIDguNi0xNi44IDguNC0yOS42LS4yLTEyLjgtMS0xNS44LTEwLjYtMzQuNi0xMy40LTI2LjItMzAuNC00My42LTUwLjItNTEuNC03LjItMi44LTE2LjItNy0yMC05LjYtMTEuNC03LjYtMTcuNi05LjItNDguOC0xMi40LTI3LjYtMi44LTU2LjYtMy40LTczLjItMS42em0zOS40IDQ0LjRjMTEuMiAyLjIgMjIuNiA1IDI1IDYuNCA3IDMuNiAyNiAyMS44IDMwLjggMjkuNCA4LjYgMTMuNCAxMSA1NCA0LjYgNzctMi42IDkuNi0xOC44IDI3LjYtMzkuNCA0NC4yLTE1LjYgMTIuNC0xNyAxMy0yOS44IDE0LTcuNi44LTIyLjQgMi4yLTMzIDMuNi0yMi42IDIuNi00NS42IDEtNTMuOC0zLjgtMy4yLTItOC02LjgtMTAuOC0xMC44LTIuNi00LjItOC40LTEwLjQtMTIuOC0xMy44LTguMi02LjgtMTMuNC0xNi40LTE5LjQtMzctMy44LTEzLjItMi44LTIxLjggNS4yLTQ3LjYgMy4yLTEwLjQgNi0xNC42IDE3LjQtMjUuOCAxMi40LTEyLjIgMjMuOC0yMi4yIDMzLjItMjkuNiA0LTMgMzguNi05LjQgNTMuNC05LjggNSAwIDE4LjIgMS42IDI5LjQgMy42eiIvPjxwYXRoIGQ9Ik0zODcuMiA2MDZjLTEyLjIgMy44LTE4LjIgMTMuNC0xNSAyNC42IDUuOCAyMS4yIDI3LjggMjUuOCA0MC42IDguNiA2LjYtOC44IDcuOC0xNi4yIDQuMi0yNC00LjgtMTAuMi0xNS40LTEzLjQtMjkuOC05LjJ6Ii8+PC9zdmc+);
}
.footer-sns-instagram {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgY2xhc3M9Imljb24iIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiPjxwYXRoIGQ9Ik0xNDAuNiA3OGMtOS44IDIuMi0yOC40IDEzLjgtMzguNiAyNC0xMC42IDEwLjgtMjEuNiAyOC44LTI0LjIgMzkuNC0yLjYgMTEuNC0yLjQgNzE0LjguNCA3MjUuMiA1LjIgMjAuNCAyOSA0Ni4yIDUzLjIgNTcuNiA4LjIgMy44IDE1LjQgMy44IDM3MC42IDMuOCAzNTEuOCAwIDM2Mi44LS4yIDM3MS0zLjggMjEtOS4yIDM4LjgtMjcgNTAtNDkuMmw1LTEwLjItLjQtMzYzLjgtLjYtMzY0LTQuNC04Yy0xMC44LTE5LjYtMTgtMjguMi0zMi42LTM4LjQtOS4yLTYuMi0xOC44LTExLjItMjQuNi0xMi40LTExLjItMi42LTcxNC40LTIuOC03MjQuOC0uMnpNNjYyIDIwMi44YzEyLjYgMi44IDYwLjIgMjIuMiA2OC40IDI4IDQuNCAzIDMwLjIgMzEuNCAzOSA0Mi42IDIuOCAzLjYgOS42IDE5LjQgMTUuMiAzNWwxMCAyOC42LjggMTQ2Yy42IDEwNi40LjQgMTQ5LjItMS40IDE1Ny44LTEuMiA2LjYtNiAyMi4yLTEwLjQgMzQuNi05LjggMjcuOC0yMyA0Ni42LTQ4LjIgNjguOC0yMi4yIDE5LjQtMzYuOCAyNi44LTYxLjQgMzAuOC0xMC40IDEuNi0yMi42IDQtMjcgNS4yLTE1IDMuOC0xNDAuNiA2LjItMjEzLjQgNC0zNy44LTEuMi03My0zLTc4LjYtNC01LjQtMS4yLTE2LjItMi44LTIzLjgtNC0yNi44LTQtNjguOC0zMy42LTg5LjgtNjMuOC0xMC4yLTE0LjgtMTktMzYuMi0yNy42LTY4LjQtMy4yLTEyLTMtMjkyLjQuMi0zMDcuMiA0LjYtMjEuMiAxNi42LTUzIDIzLjYtNjMuMiA0LTUuOCAxNS0xOC40IDI0LjQtMjcuOCAxNC0xNC4yIDIwLjQtMTkgMzUuOC0yNi44IDI3LTEzLjQgNDIuOC0xNyA4NC4yLTE5IDU3LjItMi44IDI2NC40LS42IDI4MCAyLjh6Ii8+PHBhdGggZD0iTTM1NiAyNjIuMmMtMi44IDEtMTEuMiA0LjItMTguNiA3LjItMTIuNCA0LjYtMzUuNCAyMS00Mi44IDMwLjYtNi4yIDgtMjEgNDcuOC0yMi44IDYxLS44IDcuNi0xLjQgNzAuMi0xIDEzOSAuNiAxMDguNiAxLjIgMTI2LjQgNCAxMzUuNCA0LjQgMTMuOCAxOC42IDQ0LjYgMjIuOCA0OS40IDQuNCA0LjggMzAuMiAyNCAzNy42IDI3LjggMTMgNi42IDQ4IDguNCAxNjcuOCA4LjQgMTE1LjIgMCAxNTAuOC0xLjYgMTY2LTcuNCA2LjYtMi40IDMyLjgtMjEuNCAzOS4yLTI4LjIgNy42LTguMiAyMy44LTQ0IDI2LTU3LjYgMS4yLTcuOCAxLjgtNjUgMS40LTE0OWwtLjYtMTM2LjItMTItMjMuOGMtMTEuNC0yMi44LTEyLjYtMjQuNC0yNy0zNS4yLTguMi02LjQtMjAuOC0xNC0yOC0xN2wtMTMtNS42LTE0Ny0uNGMtOTEuMi0uMi0xNDkgLjQtMTUyIDEuNnptMzE1LjYgNDFjMTIuMiA2IDE5LjYgMTQuMiAyMi40IDI0LjggNi40IDI0LTE4LjggNTEuNi00MyA0Ny4yLTkuOC0yLTIzLjYtMTQuOC0zMC4yLTI4LjQtNC42LTkuMi00LjgtMTEuNC0zLTE3LjQgMi42LTcuOCAxNi40LTIyLjQgMjYuNC0yNy42IDkuNC01IDE1LjItNC42IDI3LjQgMS40ek01MzYuOCAzMzhjNSAxIDE4LjYgNyAzMC40IDEzLjQgMjUgMTMuMiA0Ny4yIDMyLjggNjMgNTUuNiA1LjQgNy42IDExLjYgMTYuMiAxMy44IDE5IDUuOCA3LjIgMTQuOCA1NSAxMy40IDcxLTEuNiAxNi42LTEwIDUzLjgtMTMuNiA1OC42LTEuNiAyLjItNy40IDEwLjYtMTMuMiAxOC42LTE2LjQgMjMuNi00OC42IDUyLTYzLjIgNTUuOC00LjYgMS40LTE1LjYgNS42LTI0LjQgOS42LTE1LjggNy4yLTE2LjQgNy40LTQwIDcuMi0yMy4yLS4yLTI0LjQtLjQtMzktNy40LTguMi00LTE5LjItOC4yLTI0LjQtOS40LTE2LjYtNC4yLTQ5LTM0LTY5LjItNjMuNi0xNi4yLTI0LTE5LTM1LTE5LTc0LjQgMC0zMyAzLjgtNTQuOCAxMS4yLTY0LjggMi42LTMuNCA3LjItMTAuNiAxMC40LTE2IDguNC0xNC40IDI0LjQtMzEuOCAzOC40LTQyIDIwLjItMTQuOCA1My44LTMxLjIgNjcuNi0zMyAxNC4yLTIgNDUuNi0xIDU3LjggMS44eiIvPjxwYXRoIGQ9Ik00OTEgMzk4Yy00LjQuOC0xNi40IDYtMjYuNiAxMS40LTE2IDguNC0yMCAxMS42LTMxLjQgMjUuNC03LjYgOS4yLTE0IDE5LjItMTUuNCAyNC0zLjIgMTEuMi0zLjIgNTIgMCA2Mi42IDMuMiAxMSAyNC40IDM2LjQgMzUgNDIgMTQuOCA4IDM3IDE2LjYgNDUuOCAxNy44IDYuMi44IDEyIDAgMjAuNi0zLjIgNi42LTIuMiAxNy44LTYuMiAyNC42LTguNiAxMC44LTMuNiAxNS02LjYgMjcuNC0xOS42IDEyLTEyLjYgMTUtMTcgMTcuMi0yNiAzLjQtMTMuMiAzLjYtNTUuNC4yLTY2LjgtNS0xNy40LTI5LjQtNDAuNC01OC40LTU1LjItOC40LTQuMi0yNy44LTYuMi0zOS0zLjh6Ii8+PC9zdmc+);
}
.footer-sns-github {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgY2xhc3M9Imljb24iIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiPjxwYXRoIGQ9Ik0xMzguNCA3OGMtNi40IDEuNC0yNi40IDE0LjItMzYgMjIuOC04IDcuMi0yMiAyOS44LTI0LjQgMzkuMi0xLjYgNi40LTIgMTEzLjItMS42IDM2OCAuNiAyOTkuNCAxIDM1OS44IDMuNCAzNjQgMTEgMjAuMiAyMS42IDMyLjQgMzcuMiA0MyAxNS42IDEwLjYgMTcuMiAxMS4yIDM0LjIgMTMuMiAxMC42IDEuMiA2My40IDEuNiAxMjcuNiAxLjRsMTA5LjYtLjYgNi02LjggNi4yLTYuOC0xLjItMjUuMmMtLjgtMTUuOC0uMi0zMy40IDEuNC00Ny4yIDMtMjUuNCAxLjQtMzYuMi02LTQzLjItNS00LjYtNi4yLTQuOC0zMC42LTQuMi0yNy42LjgtMjQgMS42LTY4LjgtMTYtOC42LTMuNC0yMi42LTE4LTI4LjQtMjkuOC0xMS40LTIyLjgtMjctNDUtMzkuMi01NS42LTE0LTEyLjItMTkuOC0yMC44LTE5LjgtMjguNiAwLTExLjYgMTMuNi0xMi42IDMzLjItMi40IDE2LjYgOC44IDIwLjggMTIuNCA0MC44IDM2LjIgMjQuMiAyOC42IDMxIDMzLjYgNTQgMzkuNiAxNS4yIDQgNDIuMiAzIDUxLjQtMS44IDktNC42IDE4LTE1LjIgMjQuNC0yOS4yIDExLjQtMjQuMiA3LjQtMzEuMi0yMC42LTM2LjgtOS44LTItMjkuMi04LTQzLjQtMTMuNC00MC40LTE1LjgtNjQuNi0zNy40LTg1LjQtNzYuMi0xMS42LTIxLjgtMTUuNC0zMy0xOC4yLTUzLjYtNC4yLTMyLjItNC44LTYwLjItMS40LTg0IDMuNC0yMy44IDYuOC0zMi44IDIwLjItNTQgNC02IDguOC0xNS42IDExLTIxLjQgMy44LTEwIDMuOC0xMS42IDEtMzAtNS4yLTM0LjItMy4yLTUyLjQgNy42LTcwLjIgNy4yLTEyLjIgMTUtMTcuMiAyNC4yLTE1LjggMTIuOCAyLjIgNTIgMTcuNCA2Ni44IDI2LjIgMjYgMTUgMjkgMTUuNCA4Mi40IDcuMiAyNC42LTMuOCAzMy44LTQuMiA2MC0zLjIgMTcgLjYgNDEuNCAzIDU0IDUuMiAzOC40IDYuNiA0OS42IDUuMiA3My0xMCA2LjYtNC4yIDE3LjQtOS40IDI0LTExLjYgNi42LTIuMiAxNi01LjggMjEtOC4yIDEzLTYgMjgtNS42IDM1LjYuOCAxMi40IDEwLjQgMTguNiA0MS40IDE0LjQgNzEuNi00LjQgMzAuNi0zIDM5LjQgOC40IDUzLjggMy40IDQuNCAxMS4yIDE5LjIgMTcuNCAzMy4yTDc3NSA0NDN2NzhsLTEwIDI4Yy0xNS4yIDQzLjItMzYuOCA3My4yLTY2LjIgOTIuOC0xMy40IDguOC01NyAyNS40LTc2LjggMjktMjguMiA1LjItMzMuMiAxMi42LTIyIDMyLjIgMTEuMiAxOS40IDEyLjQgMzIuOCAxMS42IDEyOS42bC0uNiA4NS44IDUuNCA0LjZjMy42IDMgOS4yIDUuMiAxNiA2IDUuOC44IDYwLjIgMSAxMjAuNi42IDEwOC40LS42IDExMC4yLS42IDExOS01IDI0LTExLjYgNDAtMjcuNCA1MS42LTUwLjZsNS40LTExIC42LTM0N2MuNC0yMjMtLjItMzUzLjQtMS40LTM2NS0yLTE3LTIuNi0xOC42LTEzLTM0LTEwLjYtMTUuNC0yMi44LTI2LjItNDMuMi0zNy4yLTQuMi0yLjQtNjQuNi0yLjgtMzY2LTMuMi0xOTguNiAwLTM2NCAuNC0zNjcuNiAxLjR6Ii8+PC9zdmc+);
}
.footer-sns-linkedin {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgY2xhc3M9Imljb24iIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiPjxwYXRoIGQ9Ik0xNDEgNzcuOGMtNy40IDEuOC0xMS4yIDMuOC0yNi44IDE0LjItMTIuNCA4LjQtMjEuNiAxOC44LTMxLjYgMzdMNzcgMTM5bC0uNiAzNTljLS40IDI1NC40LjIgMzYxLjYgMS42IDM2Ny44IDMuNiAxNC40IDIwLjYgMzYuOCAzNS44IDQ3LjYgNy4yIDUgMTYuMiAxMC40IDE5LjYgMTIgNS40IDIuMiA2Ny42IDIuNiAzNzEuMiAyLjJsMzY0LjYtLjYgMTEuOC03YzE1LTkgMzAtMjQgMzktMzlsNy0xMS44LjYtMzYyLjZjLjQtMjk3IDAtMzYzLjgtMi4yLTM3MC0xLjQtNC4yLTYuOC0xNC0xMS44LTIyLTcuNi0xMS40LTEyLjQtMTYuMi0yNC40LTI0LjQtOC40LTUuNi0xOS0xMS0yMy44LTEyLjItOS44LTIuMi03MTUtMi40LTcyNC40LS4yek0yOTIuMiAxOTZjMTYgNS40IDI1LjQgMTEuNiAzNS42IDIzLjQgMjYuNCAzMC42IDI3LjYgNjMuNCAzLjggOTgtNi40IDkuNC0yNS4yIDIzLjItMzguMiAyOC0xMi44IDQuNi00MC4yIDQuMi01MS44LS44LTQzLTE5LjItNjIuOC02NC42LTQ1LTEwMy40IDE4LTM5IDU3LjgtNTcuOCA5NS42LTQ1LjJ6bTQwMyAyMDBjMjAuMiAzLjQgMjYgNS40IDM4LjYgMTIuNiAzMy42IDE5LjIgNDguMiAzOS4yIDYwIDgyLjQgNi44IDI0LjQgOCA1MSA4LjQgMTc1LjIuMiAxMzAuMi40IDEyOC4yLTExLjIgMTMzLjQtMy42IDEuNi0yMC40IDIuNC01My42IDIuNC00NC42IDAtNDktLjQtNTQuOC00LTMuNi0yLjItNy02LTcuNi04LjQtLjYtMi42LTEuNC01Mi44LTEuNi0xMTEuNi0uNi0xMDEuMi0xLTEwNy44LTQuOC0xMjEuNC03LTI0LjYtMTkuNi00MS0zOC4yLTQ5LjgtMTcuMi04LjItNDcuOC00LjgtNjYuOCA3LjQtMTguNiAxMi0zMS40IDMzLTM1LjYgNTgtMS4yIDcuNi0yIDUzLjgtMiAxMTMuNCAwIDEwOS4yIDAgMTA5LTExIDExNC0zLjYgMS42LTIwLjYgMi40LTU0LjggMi40LTQ3IDAtNTAtLjItNTQuOC00LTMtMi40LTYtNy02LjgtMTAuNi0uOC0zLjYtMS4yLTkwLjQtLjYtMTkzbDEtMTg2LjggNS42LTQuOGM1LjYtNC44IDUuOC00LjggNTMuNC00LjggMzEuMiAwIDQ5LjYuOCA1Mi44IDIuMiA2IDIuOCA4LjYgOSAxMC40IDI0LjggMi40IDIzIDExLjggMjUuMiAyOC40IDcgMTEuOC0xMi44IDI5LjYtMjUuMiA0NC40LTMwLjggMjUuMi05LjQgNjQuNC0xMS40IDEwMS4yLTUuMnptLTM3NC40IDRjMTIgNC42IDExLjQtNi40IDExLjQgMjAxIC4yIDE4MC44IDAgMTg5LjYtMy42IDE5My40LTIgMi4yLTUuOCA0LjgtOC40IDUuOC0yLjYgMS4yLTI2LjIgMi01Mi42IDItNTEuOCAwLTU2LjYtMS02MS40LTExLjYtMS42LTMuNC0yLjItNjEuNC0yLjItMTkwLjggMC0xNzAuNC4yLTE4Ni42IDMuNC0xOTEuOCAxLjgtMy4yIDUuMi02LjYgNy40LTcuOCA1LjQtMi42IDk5LjItMi44IDEwNi0uMnoiLz48L3N2Zz4=);
}
.footer-sns-bilibili {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgY2xhc3M9Imljb24iIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiPjxwYXRoIGQ9Ik0xMzguOCA3Ny44Yy03LjggMi0zMiAxNy44LTM4LjggMjUuNi05LjYgMTAuNi0xOC40IDI1LTIxLjIgMzQtNC4yIDE0LjItNC4yIDcyMy42IDAgNzMzLjYgOC40IDIwLjIgMjkuNCA0MS42IDUzLjIgNTQuMiA2LjggMy42IDE4LjggMy44IDM3MCAzLjhoMzYzbDktNC4yYzE0LTYuOCAzMS42LTIyLjQgNDIuNi0zOCA5LjQtMTMuOCAxMC0xNS4yIDExLjYtMzIuNiAxLjItMTAuNCAxLjYtMTY2LjggMS40LTM2NS42LS42LTMxNy44LS44LTM0OC4yLTMuOC0zNTQuNi05LjItMTkuMi0yMC44LTMzLTM4LjYtNDVsLTE3LjYtMTItMzYyLjQtLjRjLTE5OS4yIDAtMzY1IC40LTM2OC40IDEuMnpNMzcxLjIgMjUxYzQuMiAxLjYgMjIuNiAxOC4yIDQ0LjYgMzkuOCAyOS44IDI5LjIgMzkgMzcuMiA0NS40IDM5IDEwLjYgMyA3My4yIDIuOCA4My4yLS4yIDYtMS44IDE1LjgtMTAuNCA0My40LTM3LjggMTkuOC0xOS42IDM5LjQtMzcuNCA0NC0zOS42IDE1LjItNy44IDMxLjYtNCA0MSA5LjQgMTAuNCAxNS4yIDguOCAyOC02IDQ0LjYtMTUgMTYuOC0xMSAyNC40IDE0LjIgMjYuOCAxOC44IDEuNiAyNS4yIDMuOCA0My44IDE0LjggMTkuMiAxMS4yIDI4IDIxIDQwLjYgNDQuOEw3NzUgNDExdjI1MGwtOS44IDE5LjZjLTEwLjQgMjAuNi0yMy44IDM1LjYtNDMgNDcuNi0xOC44IDEyLTE4LjYgMTItMjI2LjIgMTEuNGwtMTg5LS42LTExLjgtNC44Yy02LjQtMi42LTE4LjYtMTAuMi0yNi44LTE3LTE2LTEyLjgtMjUuNi0yNi40LTM1LTQ5LjItNC40LTExLTQuNC0xMS40LTQuNC0xMzIuMlY0MTQuNmwxMC40LTIxYzguNC0xNi44IDEzLTIzLjQgMjIuNi0zMi4yIDE3LjItMTYgMzkuMi0yNi40IDU5LjItMjguNCAyNy4yLTIuNCAzMS4yLTkuMiAxNS44LTI3LjItNS01LjgtOS42LTEzLjQtMTAuMi0xNy4yLTUuMi0yNy40IDE5LjQtNDguMiA0NC40LTM3LjZ6Ii8+PHBhdGggZD0iTTMzMC4yIDQwMC40Yy05IDEuNi0xNSA1LjQtMjMgMTUtMTEuNCAxMy40LTExLjIgMTItMTEuMiAxMjAuNnMtLjIgMTA1LjYgMTEuMiAxMjIuNEMzMTggNjczLjggMzA3IDY3MyA0OTIgNjczLjZjOTAuOC40IDE3MC42IDAgMTc3LjQtLjYgMTUuNi0xLjYgMjMuNi02LjggMzIuMi0yMWw2LjQtMTAuOFY1MzcuOGMwLTY4LS44LTEwNS40LTIuMi0xMDkuMi0zLTgtMTUuMi0yMi4yLTIyLjItMjUuOC01LjItMi42LTI2LjYtMy4yLTE3NS42LTMuNC05My40LS4yLTE3My40LjItMTc3LjggMXptNzguNCA3MC40YzkuNiA0IDIyLjggMTcuOCAyNS4yIDI2LjYgMi44IDkuOCAyLjggMzMuNCAwIDQzLjItMi40IDguNi0xMS44IDIwLjItMjAgMjQuNi04IDQtMjMuNiAzLjYtMzEtMS0zLjYtMi4yLTguNC04LTExLTEzLjYtNC4yLTguNC00LjgtMTIuNC00LjgtMzEuOCAwLTIxIC4yLTIyLjYgNi0zMS44IDQtNi40IDktMTEuMiAxNC44LTE0LjQgMTAuMi01LjQgMTIuMi01LjYgMjAuOC0xLjh6bTIwNiAwYzIwIDguMiAyOS4yIDM2LjQgMjIuMiA2Ny40LTIuOCAxMi00LjggMTYuMi0xMC44IDIyLjItNyA3LTguNCA3LjYtMTguOCA3LjYtMTkgMC0zMC42LTkuMi0zNi40LTI5LjItMy42LTEyLjQtMi40LTM3LjggMi4yLTQ2LjggNS05LjYgMjQtMjQgMzEuNi0yNCAyIDAgNi40IDEuMiAxMCAyLjh6Ii8+PC9zdmc+);
}
</style>
<!-- Config CSS -->
<!-- Other Styles -->
<style>
body, html {
font-family: Roboto, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}
a {
color: #679cc5;
}
.mdl-card__media,
#search-label,
#search-form-label:after,
#scheme-Paradox .hot_tags-count,
#scheme-Paradox .sidebar_archives-count,
#scheme-Paradox .sidebar-colored .sidebar-header,
#scheme-Paradox .sidebar-colored .sidebar-badge{
background-color: #77546f !important;
}
/* Sidebar User Drop Down Menu Text Color */
#scheme-Paradox .sidebar-colored .sidebar-nav>.dropdown>.dropdown-menu>li>a:hover,
#scheme-Paradox .sidebar-colored .sidebar-nav>.dropdown>.dropdown-menu>li>a:focus {
color: #77546f !important;
}
#post_entry-right-info,
.sidebar-colored .sidebar-nav li:hover > a,
.sidebar-colored .sidebar-nav li:hover > a i,
.sidebar-colored .sidebar-nav li > a:hover,
.sidebar-colored .sidebar-nav li > a:hover i,
.sidebar-colored .sidebar-nav li > a:focus i,
.sidebar-colored .sidebar-nav > .open > a,
.sidebar-colored .sidebar-nav > .open > a:hover,
.sidebar-colored .sidebar-nav > .open > a:focus,
#ds-reset #ds-ctx .ds-ctx-entry .ds-ctx-head a {
color: #77546f !important;
}
.toTop {
background: #1b1d3a !important;
}
.material-layout .material-post>.material-nav,
.material-layout .material-index>.material-nav,
.material-nav a {
color: #1b1d3a;
}
#scheme-Paradox .MD-burger-layer {
background-color: #1b1d3a;
}
#scheme-Paradox #post-toc-trigger-btn {
color: #1b1d3a;
}
.post-toc a:hover {
color: #679cc5;
text-decoration: underline;
}
</style>
<!-- Theme Background Related-->
<style>
body{
background-image: url(/img/bg.png);
}
</style>
<!-- Fade Effect -->
<style>
.fade {
transition: all 888ms linear;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
opacity: 1;
}
.fade.out{
opacity: 0;
}
</style>
<!-- Import Font -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"rel="stylesheet">
<script>lsloader.load("js/jquery.min.js","/js/jquery.min.js?qcusAULNeBksqffqUM2+Ig==")</script>
<script>function Queue(){this.dataStore=[];this.offer=b;this.poll=d;this.execNext=a;this.debug=false;this.startDebug=c;function b(e){if(this.debug){console.log("Offered a Queued Function.")}if(typeof e==="function"){this.dataStore.push(e)}else{console.log("You must offer a function.")}}function d(){if(this.debug){console.log("Polled a Queued Function.")}return this.dataStore.shift()}function a(){var e=this.poll();if(e!==undefined){if(this.debug){console.log("Run a Queued Function.")}e()}}function c(){this.debug=true}}var queue=new Queue();</script>
<!-- Analytics -->
<!-- Custom Head -->
</head>
<body id="scheme-Paradox" class="lazy">
<div class="material-layout mdl-js-layout has-drawer is-upgraded">
<!-- Main Container -->
<main class="material-layout__content" id="main">
<!-- Top Anchor -->
<div id="top"></div>
<!-- Hamburger Button -->
<button class="MD-burger-icon sidebar-toggle">
<span class="MD-burger-layer"></span>
</button>
<!-- Post TOC -->
<!-- Back Button -->
<!--
<div class="material-back" id="backhome-div" tabindex="0">
<a class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon"
href="#" onclick="window.history.back();return false;"
target="_self"
role="button"
data-upgraded=",MaterialButton,MaterialRipple">
<i class="material-icons" role="presentation">arrow_back</i>
<span class="mdl-button__ripple-container">
<span class="mdl-ripple"></span>
</span>
</a>
</div>
-->
<!-- Left aligned menu below button -->
<button id="post-toc-trigger-btn"
class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">format_list_numbered</i>
</button>
<ul class="post-toc-wrap mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect" for="post-toc-trigger-btn" style="max-height:80vh; overflow-y:scroll;">
<ol class="post-toc"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#sessionStorage"><span class="post-toc-number">1.</span> <span class="post-toc-text">sessionStorage</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#特点"><span class="post-toc-number">1.1.</span> <span class="post-toc-text">特点</span></a></li></ol></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#cookie"><span class="post-toc-number">2.</span> <span class="post-toc-text">cookie</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#特点-1"><span class="post-toc-number">2.1.</span> <span class="post-toc-text">特点</span></a></li></ol></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#localStorage"><span class="post-toc-number">3.</span> <span class="post-toc-text">localStorage</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#特点-2"><span class="post-toc-number">3.1.</span> <span class="post-toc-text">特点</span></a></li></ol></li></ol>
<!--
<li class="mdl-menu__item">
Some Action
</li>
-->
</ul>
<!-- Layouts -->
<!-- Post Module -->
<div class="material-post_container">
<div class="material-post mdl-grid">
<div class="mdl-card mdl-shadow--4dp mdl-cell mdl-cell--12-col">
<!-- Post Header(Thumbnail & Title) -->
<!-- Paradox Post Header -->
<!-- Random Thumbnail -->
<div class="post_thumbnail-random mdl-card__media mdl-color-text--grey-50">
<script type="text/ls-javascript" id="post-thumbnail-script">
var randomNum = Math.floor(Math.random() * 19 + 1);
$('.post_thumbnail-random').attr('data-original', '/img/random/material-' + randomNum + '.png');
$('.post_thumbnail-random').addClass('lazy');
</script>
<p class="article-headline-p">
sessionStorage localStotage AND cookies
</p>
</div>
<!-- Paradox Post Info -->
<div class="mdl-color-text--grey-700 mdl-card__supporting-text meta">
<!-- Author Avatar -->
<div id="author-avatar">
<img src="/img/avatar.png" width="44px" height="44px" alt="Author Avatar"/>
</div>
<!-- Author Name & Date -->
<div>
<strong>Feax</strong>
<span>8月 16, 2017</span>
</div>
<div class="section-spacer"></div>
<!-- Favorite -->
<!--
<button id="article-functions-like-button" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon btn-like">
<i class="material-icons" role="presentation">favorite</i>
<span class="visuallyhidden">favorites</span>
</button>
-->
<!-- Qrcode -->
<button id="article-functions-qrcode-button" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
<i class="material-icons" role="presentation">devices other</i>
<span class="visuallyhidden">devices other</span>
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="article-functions-qrcode-button">
<li class="mdl-menu__item">在其它设备中阅读本文章</li>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPYAAAD2CAAAAADAeSUUAAAC4ElEQVR42u3aQW4jMQwEQP//07vXBbJxuskxYmtqTj7IE5UMhGBTjz+3fB7Y2NjY2NjY2NjYb8l+xM+/6//z0m/WfP389Q3frXm+h3zP2NjY2Hdg//Cv/5uNJtT8Dcn61Z6xsbGxb8Bui1a70bY0JiuLt2FjY2NjB6UraVGeF618D9jY2NjYe3bbMOTr84PGxsbGxm7bjGvHA8nxJW3Py7M0bGxs7Ldnzwa9v/v51+bb2NjY2G/Gbp+8eLRxUhIzrXaOjY2NfSg7by1mVyGfH0cbRbV/CxsbG/s+7LzYJN9NRgJ5Sbtq8IyNjY19KjuPadrBarL+FSWt6MCwsbGxj2C3w9f82mXbhOTHN4yusLGxsQ9lJ6/YlLfZe9qyGhVFbGxs7KPZyfC13VbdKsQDiVlZxcbGxj6VnQf07WHlw4P84DbXerCxsbFPZc8u7ly7cjbQbX8qbGxs7FPZs821gVQyKsipbdiEjY2NfTY7H8pe23K0RSs5plWWho2Njf3h7FcwNoBZCVyFStjY2Ngfzm4HqHmRm133aYfQUZODjY2NfTR7H9knBS8/mnYYfFndxsbGxv5A9mwMsLl8U4xmR6ESNjY29t3YG2RSkPKSNmtaLr58iY2Njf2x7CKaGW2lLWyzH+aFV3awsbGx357dBkl5LJWXvbxdaY8VGxsb+2z2ZuC6GTC0g4fZcBcbGxv7Dux268k1nU3MlDcq9Q+DjY2NfQN2Hv23JWR2ZWc/hMDGxsa+A7uN+9ui1TYn+dG04Rc2Njb2qez2KUKcdTA0G0sM59vY2NjYH8ueXa/ZMzZlcjbMwMbGxj6b3cZMP1yOKYOhPH7aBEzY2NjYd2DPLtPkcdJmzPCSLA0bGxv7lux9bLQfFeeHi42NjY09i+ZbXj76bUfO2NjY2Hdj56FSG/e3g4d2MBAVUWxsbOyj2ZvNtY1EHkLlpTRqeLCxsbEPZd/nwcbGxsbGxsbGxn6b5y+RNeKVwqXXxQAAAABJRU5ErkJggg==">
</ul>
<!-- Tags (bookmark) -->
<button id="article-functions-viewtags-button" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
<i class="material-icons" role="presentation">bookmark</i>
<span class="visuallyhidden">bookmark</span>
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="article-functions-viewtags-button">
<li class="mdl-menu__item">
<a class="post_tag-link" href="/tags/cookies/">cookies</a></li><li class="mdl-menu__item"><a class="post_tag-link" href="/tags/localStotage/">localStotage</a></li><li class="mdl-menu__item"><a class="post_tag-link" href="/tags/sessionStorage/">sessionStorage</a>
</ul>
<!-- Share -->
<button id="article-fuctions-share-button" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
<i class="material-icons" role="presentation">share</i>
<span class="visuallyhidden">share</span>
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="article-fuctions-share-button">
<!-- Leancloud Views -->
<a class="post_share-link" href="#">
<li class="mdl-menu__item">
<span id="/sessionStorage-localStotage-AND-cookies.html" class="leancloud-views_num" data-flag-title="sessionStorage localStotage AND cookies">
&nbsp;浏览量
</span>
</li>
</a>
<!-- Share Weibo -->
<a class="post_share-link" href="http://service.weibo.com/share/share.php?appkey=&title=sessionStorage localStotage AND cookies&url=http://blog.jzxer.cn/sessionStorage-localStotage-AND-cookies.html&pic=&searchPic=false&style=simple" target="_blank">
<li class="mdl-menu__item">
分享到微博
</li>
</a>
<!-- Share Twitter -->
<a class="post_share-link" href="https://twitter.com/intent/tweet?text=sessionStorage localStotage AND cookies&url=http://blog.jzxer.cn/sessionStorage-localStotage-AND-cookies.html&via=Feax" target="_blank">
<li class="mdl-menu__item">
分享到 Twitter
</li>
</a>
<!-- Share Facebook -->
<a class="post_share-link" href="https://www.facebook.com/sharer/sharer.php?u=http://blog.jzxer.cn/sessionStorage-localStotage-AND-cookies.html" target="_blank">
<li class="mdl-menu__item">
分享到 Facebook
</li>
</a>
<!-- Share Google+ -->
<a class="post_share-link" href="https://plus.google.com/share?url=http://blog.jzxer.cn/sessionStorage-localStotage-AND-cookies.html" target="_blank">
<li class="mdl-menu__item">
分享到 Google+
</li>
</a>
<!-- Share LinkedIn -->
<a class="post_share-link" href="https://www.linkedin.com/shareArticle?mini=true&url=http://blog.jzxer.cn/sessionStorage-localStotage-AND-cookies.html&title=sessionStorage localStotage AND cookies" target="_blank">
<li class="mdl-menu__item">
分享到 LinkedIn
</li>
</a>
<!-- Share QQ -->
<a class="post_share-link" href="http://connect.qq.com/widget/shareqq/index.html?site=Feax&#39;s Blog&title=sessionStorage localStotage AND cookies&summary=web全栈工程师,摇滚,vue,vuex,react,webpack,git,koa2&pics=http://blog.jzxer.cn/img/favicon.png&url=http://blog.jzxer.cn/sessionStorage-localStotage-AND-cookies.html" target="_blank">
<li class="mdl-menu__item">
分享到 QQ
</li>
</a>
<!-- Share Telegram -->
<a class="post_share-link" href="https://telegram.me/share/url?url=http://blog.jzxer.cn/sessionStorage-localStotage-AND-cookies.html&text=sessionStorage localStotage AND cookies" target="_blank">
<li class="mdl-menu__item">
分享到 Telegram
</li>
</a>
</ul>
</div>
<!-- Post Content -->
<div id="post-content" class="mdl-color-text--grey-700 mdl-card__supporting-text fade out">
<h3 id="sessionStorage"><a href="#sessionStorage" class="headerlink" title="sessionStorage"></a>sessionStorage</h3><blockquote>
<p>引入一个浏览器窗口的概念,开启在同源的同窗口,即使跳到其他页面,数据仍然存在,页面刷新也不会消除数据,</p>
</blockquote>
<h4 id="特点"><a href="#特点" class="headerlink" title="特点"></a>特点</h4><ul>
<li>减少网络流量:一旦数据保存在本地后,就可以避免再向服务器请求数据,因此减少不必要的数据请求,减少数据在浏览器和服务器间不必要地来回传递</li>
<li>快速显示数据:性能好,从本地读数据比通过网络从服务器获得数据快得多,本地数据可以即时获得。再加上网页本身也可以有缓存,因此整个页面和数据都在本地的话,可以立即显示</li>
<li>临时储存很多时候数据只需要在用户浏览一组页面期间使用关闭窗口后数据就可以丢弃了这种情况使用sessionStorage非常方便</li>
</ul>
<h3 id="cookie"><a href="#cookie" class="headerlink" title="cookie"></a>cookie</h3><blockquote>
<p>数据始终在同源的http请求中携带即使不需要即cookie在浏览器和服务器间来回传递数据还有路径path的概念可以限制cookie只属于某个路径下。</p>
</blockquote>
<h4 id="特点-1"><a href="#特点-1" class="headerlink" title="特点"></a>特点</h4><ul>
<li>cookie数据不能超过4k同时因为每次http请求都会携带cookie所以cookie只适合保存很小的数据如会话标识</li>
<li>只在设置的cookie过期时间之前一直有效即使窗口或浏览器关闭,即有一个过期值</li>
<li>cookie也是在所有同源窗口中都是共享的。</li>
</ul>
<h3 id="localStorage"><a href="#localStorage" class="headerlink" title="localStorage"></a>localStorage</h3><h4 id="特点-2"><a href="#特点-2" class="headerlink" title="特点"></a>特点</h4><ul>
<li>生命周期是永久性的。假若使用localStorage存储数据即使关闭浏览器也不会让数据消失除非主动的去删除数据使用的方法如上所示。localStorage有length属性可以查看其有多少条记录的数据。</li>
</ul>
<p>使用方法:</p>
<pre><code class="js">var storage = null;
if(window.localStorage){ //判断浏览器是否支持localStorage
storage = window.localStorage;
storage.setItem(&quot;name&quot;, &quot;Rick&quot;); //调用setItem方法存储数据
alert(storage.getItem(&quot;name&quot;)); //调用getItem方法弹框显示 name 为 Rick
storage.removeItem(&quot;name&quot;); //调用removeItem方法移除数据
alert(storage.getItem(&quot;name&quot;)); //调用getItem方法弹框显示 name 为 null
}
</code></pre>
</div>
<!-- Post Comments -->
</div>
<!-- Post Prev & Next Nav -->
<nav class="material-nav mdl-color-text--grey-50 mdl-cell mdl-cell--12-col">
<!-- Prev Nav -->
<a href="/七种公司永远做不大-十种老板永远不成功.html" id="post_nav-newer" class="prev-content">
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon mdl-color--white mdl-color-text--grey-900" role="presentation">
<i class="material-icons">arrow_back</i>
</button>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
新篇
</a>
<!-- Section Spacer -->
<div class="section-spacer"></div>
<!-- Next Nav -->
<a href="/wuti.html" id="post_nav-older" class="next-content">
旧篇
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon mdl-color--white mdl-color-text--grey-900" role="presentation">
<i class="material-icons">arrow_forward</i>
</button>
</a>
</nav>
</div>
</div>
<!-- Overlay For Active Sidebar -->
<div class="sidebar-overlay"></div>
<!-- Material sidebar -->
<aside id="sidebar" class="sidebar sidebar-colored sidebar-fixed-left" role="navigation">
<div id="sidebar-main">
<!-- Sidebar Header -->
<div class="sidebar-header header-cover" style="background-image: url(/img/sidebar_header.png);">
<!-- Top bar -->
<div class="top-bar"></div>
<!-- Sidebar toggle button -->
<button type="button" class="sidebar-toggle mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" style="display: initial;" data-upgraded=",MaterialButton,MaterialRipple">
<i class="material-icons">clear_all</i>
<span class="mdl-button__ripple-container">
<span class="mdl-ripple">
</span>
</span>
</button>
<!-- Sidebar Avatar -->
<div class="sidebar-image">
<img src="/img/avatar.png" alt="Feax's avatar">
</div>
<!-- Sidebar Email -->
<a data-toggle="dropdown" class="sidebar-brand" href="#settings-dropdown">
710328466@qq.com
<b class="caret"></b>
</a>
</div>
<!-- Sidebar Navigation -->
<ul class="nav sidebar-nav">
<!-- User dropdown -->
<li class="dropdown">
<ul id="settings-dropdown" class="dropdown-menu">
<li>
<a href="710328466@qq.com" target="_blank" title="Email Me">
<i class="material-icons sidebar-material-icons sidebar-indent-left1pc-element">email</i>
Email Me
</a>
</li>
</ul>
</li>
<!-- Homepage -->
<li id="sidebar-first-li">
<a href="/">
<i class="material-icons sidebar-material-icons">home</i>
主页
</a>
</li>
<!-- Archives -->
<li class="dropdown">
<a href="#" class="ripple-effect dropdown-toggle" data-toggle="dropdown">
<i class="material-icons sidebar-material-icons">inbox</i>
归档
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
<a class="sidebar_archives-link" href="/archives/2018/06/">六月 2018<span class="sidebar_archives-count">2</span></a></li><li><a class="sidebar_archives-link" href="/archives/2018/05/">五月 2018<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/archives/2018/04/">四月 2018<span class="sidebar_archives-count">7</span></a></li><li><a class="sidebar_archives-link" href="/archives/2018/03/">三月 2018<span class="sidebar_archives-count">3</span></a></li><li><a class="sidebar_archives-link" href="/archives/2018/02/">二月 2018<span class="sidebar_archives-count">2</span></a></li><li><a class="sidebar_archives-link" href="/archives/2018/01/">一月 2018<span class="sidebar_archives-count">5</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/12/">十二月 2017<span class="sidebar_archives-count">4</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/11/">十一月 2017<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/10/">十月 2017<span class="sidebar_archives-count">3</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/09/">九月 2017<span class="sidebar_archives-count">2</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/08/">八月 2017<span class="sidebar_archives-count">5</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/07/">七月 2017<span class="sidebar_archives-count">6</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/06/">六月 2017<span class="sidebar_archives-count">6</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/04/">四月 2017<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/03/">三月 2017<span class="sidebar_archives-count">3</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/02/">二月 2017<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/01/">一月 2017<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/archives/2016/11/">十一月 2016<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/archives/2016/08/">八月 2016<span class="sidebar_archives-count">1</span></a>
</ul>
</li>
<!-- Categories -->
<!-- Pages -->
<li>
<a href="/timeline" title="时间轴">
<i class="material-icons sidebar-material-icons">person</i>
时间轴
</a>
</li>
<li class="divider"></li>
<li>
<a href="/tags" title="标签">
<i class="material-icons sidebar-material-icons">person</i>
标签
</a>
</li>
<li>
<a href="/gallery" title="图库">
<i class="material-icons sidebar-material-icons">person</i>
图库
</a>
</li>
<li>
<a href="/footprint" title="我的足迹">
<i class="material-icons sidebar-material-icons">person</i>
我的足迹
</a>
</li>
<li class="divider"></li>
<li>
<a href="/about" title="About">
<i class="material-icons sidebar-material-icons">person</i>
About
</a>
</li>
<!-- Article Number -->
<li>
<a href="/archives">
文章总数
<span class="sidebar-badge">55</span>
</a>
</li>
</ul>
<!-- Sidebar Footer -->
<!--
I'm glad you use this theme, the development is no so easy, I hope you can keep the copyright, I will thank you so much.
If you still want to delete the copyrights, could you still retain the first one? Which namely "Theme Material"
It will not impact the appearance and can give developers a lot of support :)
很高兴您使用并喜欢该主题,开发不易 十分谢谢与希望您可以保留一下版权声明。
如果您仍然想删除的话 能否只保留第一项呢?即 "Theme Material"
它不会影响美观并可以给开发者很大的支持和动力。 :)
-->
<!-- Sidebar Divider -->
<div class="sidebar-divider"></div>
<!-- Theme Material -->
<!-- Help & Support -->
<!--
-->
<!-- Feedback -->
<!--
-->
<!-- About Theme -->
<!--
-->
</div>
<!-- Sidebar Image -->
</aside>
<!-- Footer Top Button -->
<div id="back-to-top" class="toTop-wrap">
<a href="#top" class="toTop">
<i class="material-icons footer_top-i">expand_less</i>
</a>
</div>
<!--Footer-->
<footer class="mdl-mini-footer" id="bottom">
<!-- Paradox Footer Left Section -->
<div class="mdl-mini-footer--left-section sns-list">
<!-- Twitter -->
<a href="https://twitter.com/Rockhellbear" target="_blank">
<button class="mdl-mini-footer--social-btn social-btn footer-sns-twitter">
<span class="visuallyhidden">Twitter</span>
</button><!--
--></a>
<!-- Facebook -->
<a href="https://www.facebook.com/facebook" target="_blank">
<button class="mdl-mini-footer--social-btn social-btn footer-sns-facebook">
<span class="visuallyhidden">Facebook</span>
</button><!--
--></a>
<!-- Google + -->
<a href="https://www.google.com/" target="_blank">
<button class="mdl-mini-footer--social-btn social-btn footer-sns-gplus">
<span class="visuallyhidden">Google Plus</span>
</button><!--
--></a>
<!-- Weibo -->
<a href="http://weibo.com/5330486979/fans?topnav=1&amp;wvr=6&amp;mod=message&amp;need_filter=1" target="_blank">
<button class="mdl-mini-footer--social-btn social-btn footer-sns-weibo">
<span class="visuallyhidden">Weibo</span>
</button><!--
--></a>
<!-- Instagram -->
<a href="https://www.instagram.com/jzxer" target="_blank">
<button class="mdl-mini-footer--social-btn social-btn footer-sns-instagram">
<span class="visuallyhidden">Instagram</span>
</button><!--
--></a>
<!-- Tumblr -->
<!-- Github -->
<a href="https://github.com/j710328466" target="_blank">
<button class="mdl-mini-footer--social-btn social-btn footer-sns-github">
<span class="visuallyhidden">Github</span>
</button><!--
--></a>
<!-- LinkedIn -->
<a href="http://www.linkedin.com/in/%E5%BF%97%E9%9B%84-%E6%B1%9F-338928105/" target="_blank">
<button class="mdl-mini-footer--social-btn social-btn footer-sns-linkedin">
<span class="visuallyhidden">LinkedIn</span>
</button><!--
--></a>
<!-- Zhihu -->
<!-- Bilibili -->
<a href="https://space.bilibili.com/73148384/#/" target="_blank">
<button class="mdl-mini-footer--social-btn social-btn footer-sns-bilibili">
<span class="visuallyhidden">Bilibili</span>
</button><!--
--></a>
<!-- Telegram -->
</div>
<!--Copyright-->
<div id="copyright">
Copyright&nbsp;©&nbsp;2016&nbsp;-<script type="text/javascript">var fd = new Date();document.write("&nbsp;" + fd.getFullYear() + "&nbsp;");</script>Feax's Blog
</div>
<!-- Paradox Footer Right Section -->
<!--
I am glad you use this theme, the development is no so easy, I hope you can keep the copyright.
It will not impact the appearance and can give developers a lot of support :)
很高兴您使用该主题,开发不易,希望您可以保留一下版权声明。
它不会影响美观并可以给开发者很大的支持。 :)
-->
<div class="mdl-mini-footer--right-section">
<div>
<div class="footer-develop-div">Powered by <a href="https://hexo.io" target="_blank" class="footer-develop-a">Hexo</a></div>
<div class="footer-develop-div">Theme - <a href="https://github.com/viosey/hexo-theme-material" target="_blank" class="footer-develop-a">Material</a></div>
</div>
</div>
</footer>
<!-- Import File -->
<script>lsloader.load("js/lazyload.min.js","/js/lazyload.min.js?1BcfzuNXqV+ntF6gq+5X3Q==")</script>
<script>lsloader.load("js/js.min.js","/js/js.min.js?oAl/+lvaqTFV31JXTmbrNA==")</script>
<script>lsloader.load("js/nprogress.js","/js/nprogress.js?pl3Qhb9lvqR1FlyLUna1Yw==")</script>
<script type="text/ls-javascript" id="NProgress-script">
NProgress.configure({
showSpinner: true
});
NProgress.start();
$('#nprogress .bar').css({
'background': '#fff'
});
$('#nprogress .peg').css({
'box-shadow': '0 0 10px #fff, 0 0 15px #fff'
});
$('#nprogress .spinner-icon').css({
'border-top-color': '#fff',
'border-left-color': '#fff'
});
setTimeout(function() {
NProgress.done();
$('.fade').removeClass('out');
}, 888);
</script>
<script>lsloader.load("js/smoothscroll.js","/js/smoothscroll.js?lOy/ACj5suSNi7ZVFVbpFQ==")</script>
<!-- Leancloud -->
<script src="https://cdn1.lncld.net/static/js/av-core-mini-0.6.1.js"></script>
<script>
AV.initialize('ONAFtjxhaBqrA7LGAQFYsmUx-gzGzoHsz', 'hUSwCACEEbPBcGUh42RMzy6P');
</script>
<script type="text/ls-javascript" id="leancloud-views-script">
function showTime(Counter) {
var query = new AV.Query(Counter);
$('.leancloud-views_num').each(function() {
var url = $(this).attr('id').trim();
query.equalTo('url', url);
query.find({
success: function(results) {
if (results.length === 0) {
var content = '0 ' + $(document.getElementById(url)).text();
$(document.getElementById(url)).text(content);
return;
}
for (var i = 0; i < results.length; i++) {
var object = results[i];
var content = object.get('time') + ' ' + $(document.getElementById(url)).text();
$(document.getElementById(url)).text(content);
}
},
error: function(object, error) {
console.log('Error: ' + error.code + ' ' + error.message);
}
});
});
}
function addCount(Counter) {
var Counter = AV.Object.extend('Counter');
url = $('.leancloud-views_num').attr('id').trim();
title = $('.leancloud-views_num').attr('data-flag-title').trim();
var query = new AV.Query(Counter);
query.equalTo('url', url);
query.find({
success: function(results) {
if (results.length > 0) {
var counter = results[0];
counter.fetchWhenSave(true);
counter.increment('time');
counter.save(null, {
success: function(counter) {
var content = counter.get('time') + ' ' + $(document.getElementById(url)).text();
$(document.getElementById(url)).text(content);
},
error: function(counter, error) {
console.log('Failed to save Visitor num, with error message: ' + error.message);
}
});
} else {
var newcounter = new Counter();
newcounter.set('title', title);
newcounter.set('url', url);
newcounter.set('time', 1);
newcounter.save(null, {
success: function(newcounter) {
console.log('newcounter.get(\'time\')='+newcounter.get('time'));
var content = newcounter.get('time') + ' ' + $(document.getElementById(url)).text();
$(document.getElementById(url)).text(content);
},
error: function(newcounter, error) {
console.log('Failed to create');
}
});
}
},
error: function(error) {
console.log('Error:' + error.code + ' ' + error.message);
}
});
}
$(function() {
var Counter = AV.Object.extend('Counter');
if ($('.leancloud-views_num').length === 1) {
addCount(Counter);
} else if ($('.post-title-link').length > 1) {
showTime(Counter);
}
});
</script>
<!-- UC Browser Compatible -->
<script>
var agent = navigator.userAgent.toLowerCase();
if(agent.indexOf('ucbrowser')>0) {
document.write('<link rel="stylesheet" href="/css/uc.css">');
alert('由于 UC 浏览器使用极旧的内核,而本网站使用了一些新的特性。\n为了您能更好的浏览推荐使用 Chrome 或 Firefox 浏览器。');
}
</script>
<!-- Window Load-->
<script type="text/ls-javascript" id="window-load">
$(window).on('load', function() {
// Post_Toc parent position fixed
$('.post-toc-wrap').parent('.mdl-menu__container').css('position', 'fixed');
});
</script>
<!-- MathJax Load-->
<script type="text/ls-javascript" id="lazy-load">
// Offer LazyLoad
queue.offer(function(){
$('.lazy').lazyload({
effect : 'show'
});
});
// Start Queue
$(document).ready(function(){
setInterval(function(){
queue.execNext();
},200);
});
</script>
<!-- Bing Background -->
<script>
(function(){
var scriptList = document.querySelectorAll('script[type="text/ls-javascript"]')
for (var i = 0; i < scriptList.length; ++i) {
var item = scriptList[i];
lsloader.runInlineScript(item.id,item.id);
}
})()
console.log('\n %c © Material Theme | Version: 1.4.0 | https://github.com/viosey/hexo-theme-material %c \n', 'color:#455a64;background:#e0e0e0;padding:5px 0;border-top-left-radius:5px;border-bottom-left-radius:5px;', 'color:#455a64;background:#e0e0e0;padding:5px 0;border-top-right-radius:5px;border-bottom-right-radius:5px;');
</script>
</main>
</div>
</body>
</html>