浏览器之本地缓存存储 localStorage.setItem 和获取缓存值 loaclStorage.getItem

项目中药做一个预览功能

整个业务逻辑页很简单

1、存储编辑的内容存储到浏览器

2、预览页面再从浏览器获取存储的编辑内容

编辑页面逻辑代码为：　

  这是给 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)
            
            var arr1=[Title]
                localStorage.setItem('temp1',arr1) // 把调用为temp1，值为arr1 的数据存储到浏览器缓存
            var arr2=[author]
                localStorage.setItem('temp2',arr2)
            var arr3=[container]
                localStorage.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
        }
</script>