首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

前端开发面试题总结之——HTML

,解析完成浏览器中显示基础页面; (7)分析页面中的超链接并显示在当前页面,重复以上过程直至无超链接需要发送,完成全部数据显示。...新增的元素有绘画 canvas ,用于媒介回放的 video 和 audio 元素,本地离线存储 localStorage 长期存储数据,浏览器关闭数据不丢失,而sessionStorage的数据浏览器关闭自动删除...这两种方式都允许开发者使用js设置的键值对进行操作,在在重新加载不同的页面的时候读出它们。这一点与cookie类似。...LocalStorage浏览器关闭了数据仍然可以保存下来,并可用于所有同源(相同的域名、协议和端口)窗口(或标签页); sessionStorage:数据存储在窗口对象中,窗口关闭对应的窗口对象消失...如何实现浏览器内多个标签页之间的通信?(阿里) 调用 localStorage、cookies 等本地存储方式 webSocket 如何兼容低浏览器

1.8K80

近一年web前端经典面试题整理

目前Java语言IT互联网行业的应用还是非常广泛的,由于大数据和云计算两大技术体系构建技术生态的过程中基本上都大量采用了Java语言,所以2021年大数据和云计算在产业领域的人才需求潜力仍然是比较大的...CSS Sprites为一些大型的网站节约了带宽,提高了用户的加载速度和 用户体验,不需要加载更多的图片 作者:编码梦想家 https://www.bilibili.com/read/cv10115331...3、有效期: cookie设置的有效期内有效,默认为浏览器关闭消失。sessionStorage会话窗口关闭失效,localStorage长期有效,需主动删除。  ...八、session与窗口的关系 每个session对象都与浏览器一一对应 重新开启一个浏览器,相当于重新创建一个session对象重新开启一个IE窗口,直接访问系统首页面 通过超链接打开的新窗口,新窗口的...(1)、window.onload方法是在网页中所有的元素(包括元素的所有关联文件)完全加载浏览器才执行的。

1.3K20
您找到你想要的搜索结果了吗?
是的
没有找到

cookie&session&localStorage

写之前转载两篇写的很棒的文章先看看:Session和Cookie Session和Cookie 一:cookie 1、定义: cookie是存储浏览器上的一小段数据,用来记录某些当页面关闭或者刷新仍然需要记录的信息...5、cookie的来源 解析cookie之前,我们先做一个小实验,找到cookie后点击右键清除cookie, ? 但当我重新刷新一遍网页,cookie又出现了,why? ?...浏览器加载页面时发现响应头部有 set-cookie字段,就把这个cookie 种到浏览器指定域名下。...3、 session 可保存在服务器内存中,也可保存在数据库中,只是idcookie中 三:localStorage 1、定义: localStorage HTML5本地存储web storage特性的...API之一,用于将大量数据(最大5M)保存在浏览器中,保存数据永远存在不会失效过期,除非用 js手动清除。

1.6K40

几种浏览器存储方法及其优缺点

:为每一个给定的源(given origin)维持一个独立的存储区域,该存储区域页面会话期间可用(即只要浏览器处于打开状态,包括页面重新加载和恢复) localStorage:同样的功能,但是浏览器关闭...,然后重新打开数据仍然存在。...注意,刷新页面sessionStorage不会清除,但是打开同域新页面访问不到 4. cookie、localStorage、sessionStorage之间的区别 他们都是保存在浏览器端的存储方式,他们之间的区别...数据有效期不同,sessionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持;localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie只设置的...安全性 需要注意的是,不是什么数据都适合放在 Cookie、localStorage 和 sessionStorage 中的,因为它们保存在本地容易被篡改,使用它们的时候,需要时刻注意是否有代码存在 XSS

6.6K50

浏览器缓存库设计总结(localStorageindexedDB)

浏览器向服务器发送请求 max-age 这段时间里浏览器就不会再向服务器发送请求了。...以上就是浏览器缓存几个基本的概念,更多知识可以wiki中学习,这里就不一一介绍了.接下来我们具体看看如何优化web应用以及缓存策略给公司带来的价值. 2.Web性能优化基本方案以及缓存策略为公司带来的价值...gulp或者webpack这些打包工具, 可以帮我们压缩js,css,html代码,并且将不同页面模块的js,css打包合并到一个文件中,好处就是减少了http请求,降低了资源的体积,使得响应更快.但是仍然存在一个缺陷...)的对象 Storage;存储的数据将保存在浏览器会话中。...是满足不了的,所以这种情况下饿哦们需要自己实现具有过期时间的localStorage库, 关于如何实现该功能,笔者之前也写过一篇文章,有详细的介绍,并且可以localStorage使用起来更强大,感兴趣的可以学习研究一下

1.1K10

关于 HTML5 LocalStorage 的 5 个不为人知的事实

SessionStorage 值某些浏览器重启仍然存在 SessionStorage 与 LocalStorage 不同,它不是为在用户浏览器中长期保存值而设计的。...因此,虽然它是服务器上的一个新“会话”,但从浏览器的角度来看,它是浏览器重启单个会话的延续。...这使得 SessionStorage 成为一种理想的存储技术,用于临时“备份”用户表单值、输入时将输入保存到 SessionStorage 以及页面加载时恢复(如果存在),以进一步帮助用户从浏览器崩溃或意外页面刷新中恢复...此外,由于浏览器的“会话恢复”功能不会重新打开私有模式会话,因此浏览器窗口关闭 SessionStorage 中创建的任何内容也将丢失。...实际上,简而言之,隐私浏览会话期间放入 Local 或 SessionStorage 的任何数据都会在浏览器窗口关闭(有意或无意)立即丢失。 4.

81730

前端面试题1(HTML篇)

CSS会等到页面被加载完再加载 import是CSS2.1 提出的,只IE5以上才能被识别,而link是XHTML标签,无兼容问题 常见的浏览器内核有哪些?...长期存储数据,浏览器关闭数据不丢失 sessionStorage 的数据浏览器关闭自动删除 语意化更好的内容元素,比如 article、footer、header、nav、section 表单控件...长期存储数据,浏览器关闭数据不丢失 sessionStorage 的数据浏览器关闭自动删除 语意化更好的内容元素,比如 article、footer、header、nav、section 表单控件...,那么就会重新下载文件中的资源并进行离线存储。...cookie是网站为了标示用户身份而储存在用户本地终端(Client Side)上的数据(通常经过加密) cookie数据始终同源的http请求中携带(即使不需要),记会在浏览器和服务器间来回传递

1.8K10

Chrome 拓展开发系列:数据存储之 chrome.storage 和 localStorage

前言chrome.storage 和 localStorage 都是浏览器中用于存储数据的机制,下面我们一起聊聊它们是什么,区别以及使用示例。...sessionStorage为每一个给定的源(origin)维持一个独立的存储区域,该存储区域页面会话期间可用(即只要浏览器处于打开状态,包括页面重新加载和恢复)。...localStorage和 sessionStorage 做同样的事情,但即使浏览器关闭并重新打开也仍然存在。...我鼓励互动和建立社区,因此请留下你的问题、建议或主题请求,我知道你感兴趣的内容。此外,我将分享最新的互联网和技术资讯,以确保你与技术世界的最新发展保持联系。...我期待与你一起技术之路上前进,一起探讨技术世界的无限可能性。 保持关注我的博客,让我们共同追求技术卓越。我正在参与2023腾讯技术创作特训营第四期有奖征文,快来和我瓜分大奖!

1.4K40

现代前端技术解析:前端跨站技术

前端跨站技术 随着前端技术栈服务端和移动端上的尝试和日益成熟,前端工程师的追求绝不只是页面上的技术,如何实现跨服务端,如何扩展到移动端开发将变成主要讨论议题。...SPA场景下SEO的问题 SPA应用加载的基本流程:浏览器端先加载一个空页面和JavaScript脚本,然后异步请求接口获取数据,渲染页面数据内容展示给用户。...基于MVVM的前后端同构 页面加载完成后会开始扫描DOM结构中的Directive指令并进行DOM操作渲染或事件绑定,所以数据的显示仍然需要页面执行Directive才能完成。...基于Virtual DOM的前后端同构 浏览器生成前端DOM结构,或在直出层直接转换成HTML文本字符串输出。...Virtual DOM的逻辑实现仍然需要在浏览器端进行事件绑定来完成,最好同构框架帮助我们自动完成,根据HTML的结构进行特定的事件绑定处理,保证最后展示给用户的页面完整且带有交互逻辑。 ?

1.1K41

前端面试中小型公司都考些什么

一般使用反向代理,需要通过修改 DNS 域名解析到代理服务器 IP,这时浏览器无法察觉到真正服务器的存在,当然也就不需要修改配置了。...LocalStorage的优点:大小方面,LocalStorage的大小一般为5MB,可以储存更多的信息LocalStorage是持久储存,并不会随着页面的关闭而消失,除非主动清理,不然会永久存在仅储存在本地...,不像Cookie那样每次HTTP请求都会被携带LocalStorage的缺点:存在浏览器兼容问题,IE8以下版本的浏览器不支持如果浏览器设置为隐私模式,那我们将无法读取到LocalStorageLocalStorage...如何实现浏览器内多个标签页之间的通信?实现多个标签页之间的通信,本质上都是通过中介者模式来实现的。...所以CSS一般写在headr中,浏览器尽快发送请求去获取css样式。所以,开发过程中,导入外部样式使用link,而不用@import。如果css少,尽可能采用内嵌样式,直接写在style标签中。

75630

【JS】1693- 重学 JavaScript API - Web Storage API

这些方法允许开发者浏览器中保存和获取数据。 localStorage 用于「持久性存储数据」,数据会一直保留在用户的浏览器中,即使用户关闭了浏览器重新启动设备。...通过将用户的偏好保存在本地浏览器中,可以提供更好的用户体验,并在用户下次访问网站时恢复其个性化设置。...,以便用户关闭浏览器再次访问网站时保持登录状态。...// 用户登录成功,将登录状态存储到本地存储中 localStorage.setItem("isLoggedIn", "true"); // 检查本地存储中是否存在登录状态 const isLoggedIn...「容量限制」 尽管 Web Storage 提供较大的存储容量,但仍然要注意不要滥用存储空间,以免影响浏览器性能和用户体验。

24240

彻底弄懂浏览器缓存策略

,所以重新归纳总结一下,温故而知新 Web缓存介绍 Web缓存是指一个Web资源(如html页面,图片,js,数据等)存在于Web服务器和客户端(浏览器)之间的副本。...因为缓存的资源保存在内存中,所以读取速度较快,但是关闭进程,缓存资源也会随之销毁,一般来说,系统不会给内存分配较大的容量,因此内存缓存一般用于存储较小文件。...与内存相比,硬盘的读取速度相对较慢,但硬盘缓存持续的时间更长,关闭进程之后,缓存的资源仍然存在。由于硬盘的容量较大,因此一般用于存储大文件。 下图可清晰看出差别: ?...200 from prefetch cache preload或prefetch的资源加载时,两者也是均存储http cache,当资源加载完成,如果资源是可以被缓存的,那么其被存储http cache...页面会话浏览器打开期间一直保持,并且重新加载或恢复页面仍会保持原来的页面会话。 定义最优缓存策略 使用一致的网址:如果您在不同的网址上提供相同的内容,将会多次获取和存储该内容。

2.4K30

前端面试如何回答,这些题目或许可以给你一些提示

对于浏览器的缓存,主要针对的是前端的静态资源,最好的效果就是,发起请求之后,拉取相应的静态资源,并保存在本地。...使用浏览器缓存,有以下优点:减少了服务器的负担,提高了网站的性能加快了客户端网页的加载速度减少了多余网络数据传输如何防御 XSS 攻击?...CSP 指的是内容安全策略,它的本质是建立一个白名单,告诉浏览器哪些外部资源可以加载和执行。我们只需要配置规则,如何拦截由浏览器自己来实现。...参考:前端进阶面试题详细解答如何减少 Webpack 打包体积(1)按需加载开发 SPA 项目的时候,项目中都会存在很多路由页面。...LocalStorage的优点:大小方面,LocalStorage的大小一般为5MB,可以储存更多的信息LocalStorage是持久储存,并不会随着页面的关闭而消失,除非主动清理,不然会永久存在仅储存在本地

58920

前端必学必会-多媒体-本地存储-浏览器与服务器的交互-通信功能

页面会话浏览器打开期间一直保持,并且重新加载或恢复页面仍会保持原来的页面会话。...如果你想在浏览器窗口关闭还保留数据,可以使用 localStorage 属性 ?...= localStorage.getItem("lastname"); 浏览器的API有两个: localStorage sessionStorage 存在于window对象中: localStorage...localStorage,将数据保存在客户端本地的硬件设备,浏览器关闭,数据还在,下次重新打开浏览器访问网站时就可以继续使用了。...这样,当浏览器在在线状态时,就可以把这些文件缓存到本地,往后,当用户离线状态下,访问应用程序时,这些资源文件就会自动加载,从而用户正常使用浏览。

2.2K20

关于Cookie、session和localStorage、以及sessionStorage之间的区别和联系,超详细

若设置了过期时间,浏览器就会把cookie保存到硬盘上,关闭再打开浏览器这些cookie仍然有效直到超过设定的过期时间。...,即使刷新页面或进入同源另一个页面,数据仍然存在,关闭窗口,sessionStorage就会被销毁,同时“独立”打开的不同窗口,即使是同一页面,sessionStorage对象也是不同的 Web...,浏览器只适合存储一般数据 五、sessionStorage、localStorage和cookie的区别 共同点:都是保存在浏览器端、且同源的 区别: 1、cookie数据始终同源的http...6、web Storage的api接口使用更方便 六、sessionStorage与页面js数据对象的区别 页面中一般的js对象的生存期仅在当前页面有效,因此刷新页面或转到另一页面这样的重新加载页面的情况...,数据就不存在了 而sessionStorage只要同源的同窗口中,刷新页面或进入同源的不同页面,数据始终存在,也就是说只要浏览器不关闭,数据仍然存在 本文转载自:https://www.cnblogs.com

3K10

探索客户端JavaScript

JavaScript客户端和服务器的应用场景。...单次定时器:定时器终止并运行指定程序代码,定时器就结束了。 setTimeout(TimerCode,Timerdelay); 间隔定时器:每隔一段时间就执行,直到程序它停止。...第三部分:客户端数据持久化(persistence)--cookie 延伸阅读:客户端存储--localstorage 客户端持久化存储方案:cookie localstorage 服务器端持久化存储方案...:文件系统和数据库,NOSQL JavaScript浏览器关闭或者网页重新加载时摧毁所有的变量。...可以使用cookie和localstorage(html5)保存用户上次需要保存在浏览器的数据。 cookie是浏览器存储在用户计算机里的一小块数据,有大小限制(一般是4Kb)。

64590

面试官:sessionStorage可以多个Tab之间共享数据吗?

面试题是:sessionStorage可以多个选项卡之间共享数据吗? 具体面试中涉及到的一些问题与面试流程 问题1:“你知道localStorage和sessionStorage有什么区别吗?”...localStorage的数据是持久化的,只要我们不主动清除它,它就会一直存在。 关闭选项卡/窗口会结束会话并清除 sessionStorage 中的对象。...数据可以同一网站下的不同选项卡或窗口之间共享” // Let's try to set a name in window 1 page 1 localStorage.setItem('name', '...每当文档加载浏览器的特定选项卡中时,就会创建一个唯一的页面会话并将其分配给该特定选项卡。该页面会话仅对特定选项卡有效。...只要选项卡或浏览器打开,页面会话就会持续,并且页面重新加载和恢复仍然存在新选项卡或窗口中打开页面会创建一个具有顶级浏览上下文值的新会话,这与会话 cookie 的工作方式不同。

32420

HTML和CSS面试题及答案总结一

html语义化,页面的内容结构化,便于对浏览器和搜索引擎的解析,没有css样式的情况下,以文档的形式同样易于阅读,符合文档语义的标签。...答: cookies:服务器和客户端都可以访问,大小只有4KB左右,有有效期,过期将会删除;localStorage:将数据保存在本地的硬件设备,没有时间限制,关闭浏览器也不会丢失。...才能告知浏览器文档所使用的文档类型。 当出现无样式内容闪烁的时候如何进行处理解决? 答: @import导入CSS文件会等到文档加载加载CSS样式表。...此样式表被下载和解析,将重新渲染页面,也就出现了短暂的花屏现象。 解决方法:使用link标签加载CSS样式文件。...HTML5中的新增元素: 1)canvas,用于媒介回放的video和audio元素 2)本地离线存储,localStorage长期存储数据,浏览器关闭数据不丢失;sessionStorage的数据浏览器关闭自动删除

1.2K10

前端面试那些坑之HTML篇

引用的CSS会等到页面被加载完再加载; (3)import是CSS2.1 提出的,只IE5以上才能被识别,而link是XHTML标签,无兼容问题; 5、介绍一下你对浏览器内核的理解?...绘画 canvas; 用于媒介回放的 video 和 audio 元素; 本地离线存储 localStorage 长期存储数据,浏览器关闭数据不丢失; sessionStorage...html语义化页面的内容结构化,结构更清晰,便于对浏览器、搜索引擎解析; 即使没有样式CSS情况下也以一种文档格式显示,并且是容易阅读的; 搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重...,那么就会重新下载文件中的资源并进行离线存储。...有期时间: localStorage 存储持久数据,浏览器关闭数据不丢失除非主动删除数据; sessionStorage 数据在当前浏览器窗口关闭自动删除。

1.4K90

每天10个前端小知识 【Day 4】

前端面试基础知识题 1. js中如何判断一个值是否是数组类型?...如果浏览器没有同源策略,会存在什么样的安全问题呢。...诸如 或 之类的脚本会阻塞 DOMContentLoaded,浏览器将等待它们执行结束。 图片和其他资源仍然可以继续被加载。...有效时间:localStorage 存储持久数据,浏览器关闭数据不丢失除非主动删除数据; sessionStorage 数据在当前浏览器窗口关闭自动删除;cookie设置的cookie过期时间之前一直有效...应用场景 了解了上述的前端的缓存方式,我们可以看看针对不对场景的使用选择: 标记用户与跟踪用户行为的情况,推荐使用cookie 适合长期保存在本地的数据(令牌),推荐使用localStorage 敏感账号一次性登录

11010
领券