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

转载于:https://www.cnblogs.com/xxflz/p/9565058.html

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

浏览器本地缓存：localStorage与sessionStorage
localStorage 实际开发中,localStorage用的还是挺多的. 比如,网页中有个手风琴列表,列表中有"资源管理"."域管理"."设备管 ...
localStorage与sessionStorage的区别
在之前的面试当中经常会被问到localStorage与sessionStorage的区别.通常我的回答都比较简单和我对它的理解一样:localStorage是永久存储,除非手动清除,否则会一直保存在浏 ...
HTML5 学习笔记（三）——本地存储(LocalStorage、SessionStorage、Web SQL Database)
一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...
H5存储------localStorage和sessionStorage
web现在随着计算机的高速发展,客户端干的事情越来越多了,随着事情的增多,很多东西存储就不止在服务器了,本地存储越来越强大了(大神原谅我废话了????) 早期时期 cookie存储 (之前我用着还是很 ...
JavaScript本地储存：localStorage、sessionStorage、cookie
javaScript有三种数据存储方式,分别是: sessionStorage localStorage cookier 1. sessionStorage sessionStorage仅在当前会话下 ...
HTML5本地存储localStorage，sessionStorage
HTML5新特性,用于本地存储, localStorage:不删除会一直存在斯基 sessionStorage:浏览器关掉,就跪了 /*** H5:数据存储方式,可以携带用户信息id* * 注意:* ...
Vue的缓存方法localstorage、sessionStorage
sessionStorage 也称会话缓存,当用户关闭浏览器窗口后,数据就会被删除: sessionStorage.setItem("key","value") ...
Angular本地数据存储LocalStorage
//本地存储数据===================================.factory('locals',['$window',function($window){return{ // ...
html缓存在本地缓存,HTML5 本地缓存 window.localStorage
Conway's Game of Life: An Exercise in WPF, MVVM and C# This blog post was written for the Lo ...

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

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

最新文章

热门文章