浏览器之本地缓存存储 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()

巴特西

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

最新文章

热门文章