sessionstorage

前端面试题四

家住魔仙堡 提交于 2020-03-13 00:24:22
面试有几点需注意: 面试题目: 根据你的等级和职位的变化,入门级到专家级,广度和深度都会有所增加。 题目类型: 理论知识、算法、项目细节、技术视野、开放性题、工作案例。 细节追问: 可以确保问到你开始不懂或面试官开始不懂为止,这样可以大大延展题目的区分度和深度,知道你的实际能力。因为这种知识关联是长时期的学习,临时抱佛脚绝对是记不住的。 回答问题再棒,面试官(可能是你面试职位的直接领导),会考虑我要不要这个人做我的同事?所以态度很重要、除了能做事,还要会做人。(感觉更像是相亲( •̣̣̣̣̣̥́௰•̣̣̣̣̣̥̀ )) 资深的前端开发能把absolute和relative弄混,这样的人不要也罢,因为团队需要的是:你这个人具有可以依靠的才能(靠谱)。 前端开发知识点: HTML&CSS: 对Web标准的理解、浏览器内核差异、兼容性、hack CSS基本功:布局、盒子模型、选择器优先级 HTML5、CSS3、Flexbox JavaScript: 数据类型、运算、对象、Function、继承、闭包、作用域、原型链、事件、RegExp、JSON、Ajax、 DOM、BOM、内存泄漏、跨域、异步装载、模板引擎、前端MVC、路由、模块化、Canvas、ECMAScript 6、Nodejs 其他: 移动端、响应式、自动化构建、HTTP、离线存储、 WEB安全、优化、重构 团队协作、可维护

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

馋奶兔 提交于 2020-03-13 00:18:04
相关知识点 web标准、 web语义化、 浏览器内核、 兼容性、 html5... 题目&答案 Doctype作用?严格模式与混杂模式如何区分?它们有何意义? (1)<!DOCTYPE>声明位于HTML文档中的第一行,处于<html>标签之前,用于告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。 (2)标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。 (3)如果HTML文档包含形式完整的DOCTYPE,那么他一般以标准模式呈现。对于HTML4.01文档,包含严格DTD的DOCTYPE常常导致页面已标准模式呈现。DOCTYPE不存在或者格式不正确会导致文档已混杂模式呈现。 请描述一个网页从开始请求道最终显示的完整过程? 一个网页从请求到最终显示的完整过程一般可以分为如下7个步骤: (1)在浏览器中输入网址; (2)发送至DNS服务器并获得域名对应的WEB服务器IP地址; (3)与WEB服务器建立TCP连接; (4)浏览器向WEB服务器的IP地址发送相应的HTTP请求; (5)WEB服务器响应请求并返回指定URL的数据,或错误信息,如果设定重定向,则重定向到新的URL地址; (6)浏览器下载数据后解析HTML源文件

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

随声附和 提交于 2020-03-13 00:16:14
相关知识点 web标准、 web语义化、 浏览器内核、 兼容性、 html5... 题目&答案 Doctype作用?严格模式与混杂模式如何区分?它们有何意义? (1)<!DOCTYPE>声明位于HTML文档中的第一行,处于<html>标签之前,用于告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。 (2)标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。 (3)如果HTML文档包含形式完整的DOCTYPE,那么他一般以标准模式呈现。对于HTML4.01文档,包含严格DTD的DOCTYPE常常导致页面已标准模式呈现。DOCTYPE不存在或者格式不正确会导致文档已混杂模式呈现。 请描述一个网页从开始请求道最终显示的完整过程? 一个网页从请求到最终显示的完整过程一般可以分为如下7个步骤: (1)在浏览器中输入网址; (2)发送至DNS服务器并获得域名对应的WEB服务器IP地址; (3)与WEB服务器建立TCP连接; (4)浏览器向WEB服务器的IP地址发送相应的HTTP请求; (5)WEB服务器响应请求并返回指定URL的数据,或错误信息,如果设定重定向,则重定向到新的URL地址; (6)浏览器下载数据后解析HTML源文件

Web前端存储之sessionStorage和localStorage

梦想与她 提交于 2020-03-10 10:40:16
对浏览器来说,使用 Web Storage 存储键值对比存储 Cookie 方式更直观,而且容量更大,它包含两种:localStorage 和 sessionStorage sessionStorage(临时存储) :为每一个数据源维持一个存储区域,在浏览器的此标签页打开期间存在,包括此标签页的页面重新加载 localStorage(长期存储) :与 sessionStorage 一样,但是浏览器关闭后,数据依然会一直存在 localStorage和sessionStorage的存储数据大小一般都是:5MB 用法说明:sessionStorage 和 localStorage 的用法基本一致,引用类型的值需要转换成 JSON 进行存储 1. 保存数据到本地    let obj = { name: 'xiaoming', age: 18, birthday: '2000-01-01', } sessionStorage.setItem('userInfo', JSON.stringify(obj)) localStorage.setItem('userInfo', JSON.stringify(obj)) 注:若第二次存储的key值与第一次存储的key值相同,则会覆盖第一次的值。 2. 从本地读取数据 let obj1 = JSON.parse(sessionStorage

localStorage sessionStorage cookie

与世无争的帅哥 提交于 2020-03-10 03:26:28
介绍 localStorage: localStorage 是永久的,localStorage 除非用户主动删除数据,否则数据永远不会消失。存放数据大小为5M左右 sessionStorage: sessionStorage 仅在当前会话下有效。sessionStorage 在关闭了浏览器窗口后就会被销毁。存放数据大小为5M左右 cookie: 在设置的cookie过期时间之前一直有效。 存放数据大小为4K左右, 有个数限制(一般不能超过20个) localStorage 和 sessionStorage 用法相同 存储数据 sessionStorage . setItem ( 'key' , 'value' ) ; localStorage . setItem ( 'key' , 'value' ) ; 取数据 sessionStorage . getItem ( 'key' ) ; localStorage . getItem ( 'key' ) ; 更改数据 更改数据跟存储数据类似,可直接进行赋值 sessionStorage . setItem ( 'key' , 'newVal' ) ; localStorage . setItem ( 'key' , 'newVal' ) ; 删除指定数据 sessionStorage . removeItem ( 'key' ) ;

前端开发数据存储技术

一个人想着一个人 提交于 2020-03-09 04:40:40
浏览器端: cookie WebStorage(localStorage、sessionStorage) indexedDB 服务器端: session cookie Cookie 是小甜饼的意思。顾名思义,cookie 确实非常小,它的大小限制为4KB左右。cookie只能保存字符串类型,以文本的方式。 它的主要用途有保存登录信息,比如你登录某个网站市场可以看到“记住密码”,这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。 #session机制: 当服务器收到请求需要创建session对象时,首先会检查客户端请求中是否包含sessionid。如果有sessionid,服务器将根据该id返回对应session对象。如果客户端请求中没有sessionid,服务器会创建新的session对象,并把sessionid在本次响应中返回给客户端。通常使用cookie方式存储sessionid到客户端,在交互中浏览器按照规则将sessionid发送给服务器。如果用户禁用cookie,则要使用URL重写,可以通过response.encodeURL(url) 进行实现;API对encodeURL的结束为,当浏览器支持Cookie时,url不做任何处理;当浏览器不支持Cookie的时候,将会重写URL将SessionID拼接到访问地址后。

sessionStorage 使用方法

时光怂恿深爱的人放手 提交于 2020-03-08 19:53:36
作为html5中Web Storage的一种存储方式, localStorage 和 sessionStorage 一样都是用来存储客户端临时信息的对象。 W3c上给的介绍是这两者区别在于前者用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。而 sessionStorage 存储的数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此 sessionStorage 不是一种持久化的本地存储,仅仅是会话级别的存储。个人的理解是你在打开一个页面时记录sessionStorage,当你把页面或者浏览器关闭时session中的数据即销毁。 sessionStorage的使用方法是: 1 // 保存数据到sessionStorage 2 sessionStorage.setItem('key', 'value'); 3 4 // 从sessionStorage获取数据 5 var data = sessionStorage.getItem('key'); 6 7 // 从sessionStorage删除保存的数据 8 sessionStorage.removeItem('key'); 9 10 // 从sessionStorage删除所有保存的数据 11 sessionStorage.clear(); 来源: https://www.cnblogs.com

HTML5中的sessionStorage和localStorage

谁说我不能喝 提交于 2020-03-07 08:29:06
html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage。 sessionStorage 用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。 而 localStorage 用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。 web storage和cookie的区别 Web Storage的概念和cookie相似,区别是它是为了更大容量存储设计的。Cookie的大小是受限的,并且每次你请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽,另外cookie还需要指定作用域,不可以跨域调用。 除此之外, Web Storage 拥有setItem,getItem,removeItem,clear等方法,不像cookie需要前端开发者自己封装setCookie,getCookie。 但是Cookie也是不可以或缺的:Cookie的作用是与服务器进行交互,作为HTTP规范的一部分而存在 ,而Web Storage仅仅是为了在本地“存储”数据而生(来自@otakustay 的纠正) html5 web storage的浏览器支持情况

localStorage,sessionStorage

瘦欲@ 提交于 2020-03-03 20:13:54
  h5的本地存储.   现代浏览器普遍开始支持H5本地存储,localStorage、sessionStorage。可以用来代替cookie的一部分存储功能,他比cookie存储量更大。比较实用。   两者用法类似。localStorage存储,如果不清除那么一直存在;sessionStorage是在一个会话级别上存在,如果会话关闭,那么就没了。顾名思义吧。   他们存值都是以键值对形式存在,值也是存入字符串类型(如果是对象,就序列化以后再存入)。几乎和memcached,redis这种一样。很好理解。   以下简单演示下增删改查的用法:   <script type="text/javascript"> if(window.sessionStorage){ alert('ok'); }else{ alert('fail'); } // 设置值 sessionStorage.setItem('key_a', 1); // 取值 var key_a = sessionStorage.getItem('key_a'); console.log(key_a); // 删除 sessionStorage.removeItem('key_a'); console.log(sessionStorage.getItem('key_a'));// null sessionStorage

web存储对象

心不动则不痛 提交于 2020-03-01 11:30:49
Web 存储对象有两种类型: localStorage sessionStorage localStorage 与 sessionStorage 的区别: localStorage 对象存储的数据没有时间限制。 sessionStorage 方法针对一个 session 进行数据存储,当用户关闭浏览器窗口后,数据会被删除。 那么能不能利用sessionStorage的特性,来实现阅后即焚的功能呢? 来源: https://www.cnblogs.com/joker-18/p/12388639.html