浏览器之本地缓存存储 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=resulte2document.getElementById('preview-content').innerHTML=resulte3}

sessionStorage.getItem('temp3')

</script>