区别:

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的区别以及用法的更多相关文章

  1. h5本地缓存(localStorage,sessionStorage)

    H5本地存储数据 localStorage,sessionStorage的区别: 相同点:  缓存数据比cookie的范围大; localStorage:关闭浏览器数据不会消失,除非手动删除数据 se ...

  2. vuex存储和本地存储(localstorage、sessionstorage)的区别

    1.最重要的区别:vuex存储在内存,localstorage则以文件的方式存储在本地 2.应用场景:vuex用于组件之间的传值,localstorage则主要用于不同页面之间的传值. 3.永久性:当 ...

  3. HTML5本地存储localStorage与sessionStorage

    在最近的项目中用到了html5的本地存储,下面总结一下. 1.html5几种存储形式 本地存储(localStorage && sessionStorage) 离线缓存(applica ...

  4. HTML5本地存储localStorage与sessionStorage详解

    前言 在最近的项目中用到了html5的本地存储,下面总结一下. 1.html5几种存储形式 本地存储(localStorage && sessionStorage) 离线缓存(appl ...

  5. html5的本地存储localStorage和sessionStorage

    html5的本地存储localStorage和sessionStorage html5中新增的比较重要的一个功能就是web storage来实现客户端本地存储数据,之前存储数据都是用cookie来实现 ...

  6. as2 shareObject本地缓存存储位置:

    shareObject本地缓存存储位置: win7系统用户到C:\Users\[你的用户名]\AppData\Roaming\Macromedia\Flash Player\#SharedObject ...

  7. vuex知识笔记,及与localStorage和sessionStorage的区别

    菜单快捷导航 Vuex是什么东东,有什么应用场景?localStorage和sessionStorage能否替代它? Vuex知识点State.Getter.Mutaion.Action Vuex模块 ...

  8. cookie、session、localStorage、sessionStorage的区别

    cookie的机制 cookie是存储在用户本地终端上的数据.有时也用cookies,指某些网站为了辨别用户身份,进行session跟踪而存储在本地终端上的数据,通常经过加密. Cookie是服务器发 ...

  9. localStorage和sessionStorage的区别

    //在chrome测试的结果; 知识点1:localStorage和sessionStorage的区别; localStorage生命周期是永久,这意味着除非用户显示在浏览器提供的UI上清除local ...

随机推荐

  1. 《FA分享》---创业学习--训练营直播第二课--HHR

    盛沛涵,以太白泽董事 一,基金投资的出发点: 1,这个赛道是否只有头部一两名有机会,如果不是,投的概率更大. 2,  基金投资的判断逻辑: 1.我是不是要在这个赛道布局    2.这个赛道分布如何,有 ...

  2. 创业学习---今日头条创业过程分析---HHR计划

    本文搜集和整理了今日头条创业的一些关键点的资料------by 春跃(本文的主要观点都是搜集整理,所以不得本人同意不得转载) 一,18年之前的今日头条创业时间表: 1,张一鸣参与创业的履历:酷讯,饭否 ...

  3. Spring Boot JWT 快速入门

    本章节讨论 jwt 在 spring boot 中的应用.意在快速入门 jwt. java jdk1.8 maven 3.2+ spring boot 2.0+ JSON Web Token(JWT) ...

  4. Springboot - 更优雅的方式请求发 HTTP 请求

    参考:https://www.cnblogs.com/javazhiyin/p/9851775.html RestTemplate 是 Spring 提供的用于访问Rest 服务的客户端RestTem ...

  5. Android Studio 使用入门及问题汇总

    声明:转载自http://blog.csdn.net/wei_chong_chong/article/details/56280383 之前一直用eclipse+adt做Android开发.曾经尝试使 ...

  6. iOS 增强程序健壮性 - - 使用 NullSafe 对 <null> 处理

    在项目开发中,和服务端交互数据时,若服务端数据为空时,会出现 <null>,客户端解析时会 Crash,为了增强程序的健壮性,减少 Crash 的发生,可以使用 NullSafe 这个类别 ...

  7. php环境一键升级脚本

    因为要解析PHP页面需要配置相应的PHP环境,而系统本身的php版本又大多不合适.网上那种一键lamp和lnmp的脚本很多,但是这样一来自己能够定制的空间则少了.所以我自己编写了个门用于安装php环境 ...

  8. base64,base32bit加密解密

    import base64 str='admin' str=str.encode('utf-8') #加密 bs64=base64.b64encode(str) #解密 debs64=base64.b ...

  9. 针对sklearn.svm中的"dual_coef_"理解

    1.决策函数的表达式 公式: 其中: 2.SVM经过训练后,所得到的"dual_coef_" 其实"dual_coef_"就是"ai*yi" ...

  10. a链接内容过长,换行

    上图为溢出情况,此情况均为 英文或数字,但亲测,中文也可正常换行. 添加   word-wrap: break-word;  后,正常换行. 若不希望换行,设为  white-space: nowra ...