浏览器之本地缓存存储 localStorage 和 sessionStorage的区别以及用法

区别：

1、 localStorage永久保存在浏览器（注意事是浏览器，不仅仅是一个页面），除非用户主动清除；sessionStorage在浏览器关闭之后存储的数据就会销毁（仅仅存储在当前页面）

2、根据同源原则，不同浏览器不能共享loacalStorage和sessionSrorage的信息，相同的浏览器不同页面可以共享loacalStorage（必须相同域名和端口），但是相同浏览器不同页面或者标签不能共享sessionStorage信息（sessionStorage仅仅存储在当前页面），这个页面是指顶级窗口页面，如果一个页面有几个不同的iframe标签，是可以共享sessionStorage信息。

用法：两者用法差不多，但是取值有所不同

编辑页面逻辑代码为：　

  这是给 id=btn3 选择器添加一个监听事件 
 document.getElementById('btn3').addEventListener('click', function () {
            var author=$('.TXT-author').val()
            var Title=$('.TXT-title').val()
            var container=editor1.txt.html()
            var imgInformation=document.getElementById('articla-cover').src        
            console.log(Title.length)


      localStorage 写法：
            var arr1=[Title]  取值用中括号
                localStorage.setItem('temp1',arr1) // 把调用为temp1，值为arr1 的数据存储到浏览器缓存
            var arr2=[author]
                localStorage.setItem('temp2',arr2)
            var arr3=[container]
                localStorage.setItem('temp3',arr3)

sessionStorage 写法：

　　　　　　　var arr3=container  这里的取值不要用中括号

　　　　　　　sessionStorage.setItem('temp3',arr3)


//          var arr=[Title,author,container,imgInformation]
//              localStorage.setItem("temp",arr); //存入 参数： 1.调用的值 2.所要存入的数据
            
//            var timer=setInterval(function(){
//　　            localStorage.clear(); 
//　                localStorage.removeItem("arr");　
//            
//                },1000)
        }, false)

接收：

sessionStorage.getItem()
localStorage.getItem()

<script type="text/javascript">
　　　　加载事件，当页面加载完成的时候执行下面代码
        window.onload=function(){
            var resulte1=localStorage.getItem("temp1") //temp1就是从浏览器获取的调用值
            var resulte2=localStorage.getItem("temp2")
            var resulte3=localStorage.getItem("temp3")
            document.getElementById('preview-title').innerHTML=resulte1  //再把获取的值展示出来即可
            document.getElementById('preview-author').innerHTML=resulte2
            document.getElementById('preview-content').innerHTML=resulte3
        }

　　　　sessionStorage.getItem('temp3')


</script>

删除：
localStorage.clear() 
sesionStorage.clear()