杂记(什么是内存泄漏,语义化理解,localstorage以及sessionstorage)

javascript 专栏收录该内容
19 篇文章 0 订阅

参考文章《前端面试笔试知识汇总1(含答案)》

内存泄漏

内存泄漏 指任何对象在您不再拥有或需要它之后仍然存在。

垃圾回收器 定期扫描对象,并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0(没有其他对象引用过该对象),或对该对象的惟一引用是循环的,那么该对象的内存即可回收。

  • setTimeout的第一个参数使用字符串而非函数的话,会引发内存泄漏。
  • 闭包、控制台日志、循环(在两个对象彼此引用且彼此保留时,就会产生一个循环)。

HTML语义化的理解

  • 用正确的标签做正确的事情
  • html语义化让页面的内容结构化,结构更清晰,便于对浏览器、搜索引擎解析;
  • 即使在没有样式CSS情况下也以一种文档格式显示,并且是容易阅读的;
  • 搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重,利于seo
  • 使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解

Cookie、sessionStorage 和 localStorage的区别

参考网站:《HTMl5的sessionStorage和localStorage》《3分钟学会sessionStorage用法》

sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可以方便的在web请求之间保存数据。有了本地数据,就可以避免数据在浏览器和服务器间不必要地来回传递。

sessionStoragelocalStoragecookie 之间的区别:

共同点:都是保存在浏览器端,且同源的。

区别cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递。而sessionStoragelocalStorage不会自动把数据发给服务器,仅在本地保存。cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下。存储大小限制也不同,cookie数据不能超过4k,同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,如会话标识。

sessionStoragelocalStorage 虽然也有存储大小的限制,但比cookie 大得多,可以达到5M或更大。**数据有效期不同sessionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持;localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。
作用域不同sessionStorage 不在不同的浏览器窗口中共享,即使是同一个页面;localStorage 在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知机制,可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。
sessionStorage 用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。
localStorage 用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。

为什么选择Web Storage而不是Cookie?

与Cookie相比,Web Storage存在不少的优势,概括为以下几点:

  1. 存储空间更大:IE8下每个独立的存储空间为10M,其他浏览器实现略有不同,但都比Cookie要大很多。

  2. 存储内容不会发送到服务器:当设置了Cookie后,Cookie的内容会随着请求一并发送的服务器,这对于本地存储的数据是一种带宽浪费。而Web Storage中的数据则仅仅是存在本地,不会与服务器发生任何交互。

  3. 更多丰富易用的接口:Web Storage提供了一套更为丰富的接口,使得数据操作更为简便。

  4. 独立的存储空间:每个域(包括子域)有独立的存储空间,各个存储空间是完全独立的,因此不会造成数据混乱。

设置 localstorage 很简单,同理可以设置 sessionstorage

<script type="text/javascript">
localStorage.setItem('lastname', 'liang'); // 设置
document.write(localStorage.getItem("name")); // 输出
localStorage.removeItem('lastname'); // 删除
</script>
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值