瀏覽器之本地緩存存儲 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()