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

 

区别： localStorage永久保存在浏览器  ；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)

 

预览接收页面逻辑代码为

<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>