一、localStorage,sessionStorage,cookie的简单介绍

localStorage:仅在客户端存储不参与服务器通信,存储大小一般为5M,如果不是人为清除,那么即使是关闭浏览器也会一直存在。

sessionStorage:仅在客户端存储不参与服务器通信,存储大小一般为5M,会话级存储,也就是说如果关闭当前页面或者浏览器那么就会清除

cookie:客户端存储,参与服务器通信,存储大小为4k,可设置生命周期,在设置的生命周期内有效

二、localStorage的优势及其注意点

在存储方面localstorage和sessionStorage具有巨大优势,大小为5M,比cookie大多了,所以可以用localStorage来做一些相对不太会改变的数据缓存或者说可以缓存用户的足迹,换个说法,localStorage是一个小型的数据库。

localStorage的值为string类型,这就说明我们在使用的时候要进行类型转换。

三、localStorage的缺点和痛点

一:在浏览器隐私模式下不可读取。

二:不同浏览器无法共享localStorage。

不同浏览器无法共享localStorage,相同浏览器的不同页面间可以共享相同的 localStorage(页面属于相同域名和端口),但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是,页面及标 签页仅指顶级窗口,如果一个标签页包含多个iframe标签且他们属于同源页面,那么他们之间是可以共享sessionStorage的。

三:localStorage不能被爬虫获取。

四:因为localStorage的本质是对字符串的读取,如果存储内容多的话会消耗内存空间,会导致页面变卡;并且localStorage 是同步的 (会阻塞渲染)。

五:浏览器会在第一个请求的时候就将数据加载到内存中 (浪费用户内存RAM)。

四、localStorage的三种存储方法

1.Windows.localStorage.name = 'value'

2.Windows.localStorage[name] = 'value'

3.Windows.localStorage.setItem('name','value')

五:兼容性

OK,对于localStorage和sessionStorage及cookie介绍就到这里了,有什么问题可以在下面留言,欢迎提问!

浅谈localStorage的使用场景和优劣势,以及sessionStorage和cookie的更多相关文章

  1. 浅谈localStorage本地存储

    在年会的抽奖程序中用到了localStorage现在拿出来总结下,localStorage的相关用法. 在年会抽奖的程序中,需要把获奖名单存储下来,年会现场没有网络,能最简单实现数据存储的方式就是,将 ...

  2. 浅谈localStorage的用法

    今天接到一个任务,说是让自动调节textarea标记的输入高度,而且还要记录下来,下次登录的时候还是调节后的高度,我第一时间就想到了localStorage的用法,直接代码献上: <html l ...

  3. 浅谈localStorage、sessionStorage 与cookie

    由于工作的需要,今天使用了下localStorage.sessionStorage和cookie,感觉这玩意儿还挺好用的. 关于localStorage与sessionStorage的知识点以及用法之 ...

  4. [nRF51822] 14、浅谈蓝牙低功耗(BLE)的几种常见的应用场景及架构(科普类干货)

    蓝牙在短距离无线通信领域占据举足轻重的地位—— 从手机.平板.PC到车载设备, 到耳机.游戏手柄.音响.电视, 再到手环.电子秤.智能医疗器械(血糖仪.数字血压计.血气计.数字脉搏/心率监视器.数字体 ...

  5. 浅谈Vue不同场景下组件间的数据交流

    浅谈Vue不同场景下组件间的数据“交流”   Vue的官方文档可以说是很详细了.在我看来,它和react等其他框架文档一样,讲述的方式的更多的是“方法论”,而不是“场景论”,这也就导致了:我们在阅读完 ...

  6. 【Vue】浅谈Vue不同场景下组件间的数据交流

    浅谈Vue不同场景下组件间的数据“交流”   Vue的官方文档可以说是很详细了.在我看来,它和react等其他框架文档一样,讲述的方式的更多的是“方法论”,而不是“场景论”,这也就导致了:我们在阅读完 ...

  7. 浅谈Spark应用程序的性能调优

    浅谈Spark应用程序的性能调优 :http://geek.csdn.net/news/detail/51819 下面列出的这些API会导致Shuffle操作,是数据倾斜可能发生的关键点所在 1. g ...

  8. 浅谈蓝牙低功耗(BLE)的几种常见的应用场景及架构(转载)

    转载来至beautifulzzzz,网址http://www.cnblogs.com/zjutlitao/,推荐学习 蓝牙在短距离无线通信领域占据举足轻重的地位—— 从手机.平板.PC到车载设备, 到 ...

  9. 浅谈Mysql共享锁、排他锁、悲观锁、乐观锁及其使用场景

    浅谈Mysql共享锁.排他锁.悲观锁.乐观锁及其使用场景   Mysql共享锁.排他锁.悲观锁.乐观锁及其使用场景 一.相关名词 |--表级锁(锁定整个表) |--页级锁(锁定一页) |--行级锁(锁 ...

随机推荐

  1. js内存泄漏的问题?

    内存泄漏指任何对象在您不再拥有或需要它之后仍然存在. 垃圾回收器定期扫描对象,并计算引用了每个对象的其他对象的数量.如果一个对象的引用数量为 0(没有其他对象引用过该对象),或对该对象的惟一引用是循环 ...

  2. 手把手教你写DI_3_小白徒手支持 `Singleton` 和 `Scoped` 生命周期

    手把手教你写DI_3_小白徒手支持 Singleton 和 Scoped 生命周期 在上一节:手把手教你写DI_2_小白徒手撸构造函数注入 浑身绷带的小白同学:我们继续开展我们的工作,大家都知道 Si ...

  3. 原创:DynamicDataDisplay波形显示自定义格式

    原创:DynamicDataDisplay 原版本在日期显示的格式上与我们的习惯不一样,特做如下修改: 自定义日期格式修改: //MainWindow.cs中 var ds = new Enumera ...

  4. Java-web-多个独立项目之间相互调用实践

    本篇文章只涉及到应用层面,没有涉及到什么底层原理之类的,我目前的实力还没有达到那个级别.如果是大神级别的人看到这篇文章,请跳过. 项目框架也已经是搭建好了的,springboot版本为1.5,数据库操 ...

  5. 在Qt中配置海康工业相机SDK及遇到的问题(报错)

    1.在项目的.pro文件里导入海康工业相机的SDK路径 INCLUDEPATH += \ D:\HKVersion\MVS_3.1.0\MVS\Development\Includes #这时到入Op ...

  6. UML—20—002

    博客班级 < https://edu.cnblogs.com/campus/fzzcxy/2018SE1> 作业要求 <https://edu.cnblogs.com/campus/ ...

  7. html 03-初识HTML

    03-初识HTML #本文主要内容 头标签 排版标签:<p>. <div>. <span>.<br> . <hr> . <center ...

  8. setfacl命令的基本用法

    setfacl命令的基本用法 1.setfacl的用途 setfacl命令可以用来细分linux下的文件权限. chmod命令可以把文件权限分为u,g,o三个组,而setfacl可以对每一个文件或目录 ...

  9. Linux OOM Killer造成数据库访问异常排查

    服务器上的服务器访问异常,查看/va/log/messages发现如下: Sep 22 16:08:21 safeserver kernel: java invoked oom-killer: gfp ...

  10. 网站开发学习Python实现-Django学习-介绍(6.1.1)

    @ 目录 1.MVT 2.ORM 关于作者 1.MVT 主要的目的是为了快速,简便的开发数据库驱动的网站,强调代码的复用,多个组件可以很方便以插件的方式服务于整个框架,采用的是MVT设计模式(差不多的 ...