HTML、CSS、浏览器 相关：
1. 网络中使用最多的图片格式有哪些
JPEG, GIF, PNG最流行的是JPEG格式，可以把文件压缩到最小，在PS以JPEG格式存储时，提供11级压缩级别
2. 请简述 CSS 盒子模型
一个 CSS 盒子从外到内可以分成四个部分：margin（外边距），border （边框），padding（内边距），content（内容）。默认情况下，盒子的 width 和 height 属性只是设置 content（内容）的宽和高
盒子真正的宽应该是：内容宽度+左右填充+左右边距+左右边框
盒子真正的高应该是：内容高度+上下填充+上下边距+上下边框
3. 视频/音频标签的使用
视频：
<video src=""></video>
视频标签属性：
- src 需要播放的视频地址
- width/height 设置播放视频的宽高，和 img 标签的宽高属性一样
- autoplay 是否自动播放
- controls 是否显示控制条
- poster 没有播放之前显示的展位图片
- loop 是否循环播放
- perload 预加载视频（缓存）与autoplay相冲突，设置了 autoplay 属 性，perload 属性会失效。
- muted 静音模式
音频: 音频属性和视频属性差不多，不过宽高和 poster 属性不能用
<audio>
<source src="" type="">
</audio>
4. HTML5新增的内容有哪些
- 新增语义化标签
- 新增表单类型
- 表单元素
- 表单属性
- 表单事件
- 多媒体标签
5. HTML5新增的语义化标签有哪些
语义化标签优点：1. 提升可访问性 2. SEO 3. 结构清晰，利于维护
- header页面头部
- main 页面主要内容
- footer 页面底部
- nav 导航栏
- aside 侧边栏
- article 加载页面一块独立内容
- section相当于 div
- figure 加载独立内容（上图下字）
- figcaption figure 的标题
- hgroup 标题组合标签
- mark 高亮显示
- dialog 加载对话框标签（必须 配合 open 属性）
- embed 加载插件的标签
- video 加载视频
- audio 加载音频（支持格式 ogg，mp3，wav）
6. CSS3 新增的特性
边框：
- border-radios 添加圆角边框
- border-shadow：给框添加阴影 （水平位移，垂直位移，模糊半径，阴 影尺寸，阴影颜色，insetr（内/外部阴影））
- border-image：设置边框图像
- border-image-source 边框图片的路径border-image-slice 图片边框向内偏移
- border-image-width 图片边框的宽度
- border-image-outset 边框图像区域超出边框的量
- border-image-repeat 图像边框是否平铺（repeat 平铺 round 铺满 stretch 拉伸）
背景：
- background-size 背景图片尺寸
- background-origin规定background-position属性相对于什么位置定 位
- background-clip 规定背景的绘制区域（padding-box，border-box， content-box）
渐变：
- linear-gradient() 线性渐变
- radial-gradient() 径向渐变
文本效果：
- word-break：定义如何换行
- word-wrap：允许长的内容可以自动换行
- text-overflow：指定当文本溢出包含它的元素，应该干啥
- text-shadow：文字阴影（水平位移，垂直位移，模糊半径，阴影颜色）
转换：
- transform 应用于 2D、3D 转换，可以将元素旋转，缩放，移动，倾斜
- transform-origin 可以更改元素转换的位置，（改变 xyz 轴）
- transform-style 指定嵌套元素怎么样在三位空间中呈现
2D 转换方法：
- rotate 旋转 translate（x，y）指定元素在二维空间的位移 scale（n）定义缩放转换
3D 转换方法：
- perspective（n）为 3D 转换 translate rotate scale
过渡：
- transition-proprety 过渡属性名
- transition-duration 完成过渡效果需要花费的时间
- transition-timing-function 指定切换效果的速度
- transition-delay 指定什么时候开始切换效果
动画：animation
- animation-name 为@keyframes 动画名称
- animation-duration 动画需要花费的时间
- animation-timing-function 动画如何完成一个周期
- animation-delay 动画启动前的延迟间隔
- animation-iteration-count 动画播放次数
- animation-direction 是否轮流反向播放动画
7. 清除浮动的方式有哪些？请说出各自的优点
高度塌陷：当所有的子元素浮动的时候，且父元素没有设置高度，这时候父元素就会产生高度塌陷。
-
给父元素单独定义高度
优点：快速简单，代码少 缺点：无法进行响应式布局 -
父级定义 overflow：hidden；zoom：1（针对 ie6 的 兼容）
优点：简单快速、代码少，兼容性较高
缺点：超出部分被隐藏，布局时 要注意 -
在浮动元素后面加一个空标签，clear：both；height： 0；overflow：hidden
优点：简单快速、代码少，兼容性较高。
缺点：增加空标签，不利于页面优化 -
父级定义 overflow：auto
优点：简单，代码少，兼容性好
缺点：内部宽高超过父级 div 时，会出现滚动条 -
万能清除法：
给塌陷的元素添加伪对象
.father：after{
Content：“随便写”；
Clear：both；
display：block；
Height：0；
Overflow：hidden；
Visibility：hidden
}
优点：写法固定，兼容性高
缺点：代码多
8. 定位的属性值有何区别
- position 有四个属性值：relative absolute fixed static
- relative 相对定位 不脱离文档流，相对于自身定位
- absolute 绝对定位，脱离文档流 相对于父级定位
- fixed 固定定位，脱离文档流，相对于浏览器窗口定位
- static 默认值，元素出现在正常的流中
9. 子元素如何在父元素中居中
水平居中：
- 子父元素宽度固定，子元素设置 margin：auto，并且子元素不能设置 浮动，否则居中失效
- 子父元素宽度固定，父元素设置 text-align：center，子元素设置 display：inline-block，并且子元素不能设置浮动，否则居中失效
水平垂直居中：
- 子元素相对于父元素绝对定位，子元素 top，left 设置 50%，子元素 margin-top 和 margin-left 减去各自宽高的一半
- 子元素相对于父元素绝对定位，子元素上下左右全为 0，然后设置子元素 margin：auto
- 父元素设置 display：table-cell vertical-align：middle，子元素设置 margin：auto
- 子元素相对定位，子元素 top，left 值为 50%，transform：translate （-50%，-50%）
- 子元素相对父元素绝对定位，子元素 top，left 值为 50%，transform： translate（-50%，-50%）
- 父元素设置弹性盒子， display：flex； justfy-content：center ；align-item：center； justfy-content：center
10. border-box 与 content-box 的区别
content-box 标准盒模型 width 不包括 padding 和 border
border-box 怪异盒模型 width 包括 padding 和 border
11. 元素垂直居中
- 设置子元素和父元素的行高一样
- 子元素设置为行内块，再加 vertical-align：middle
- 已知父元素高度，子元素相对定位，通过 transform：translateY（-50%）
- 不知道父元素高度，子绝父相，子元素 top：50%，transform： translateY（-50%）
- 创建一个隐藏节点，让隐藏节点的 height 为剩余高度的一半
- 给父元素 display：table，子元素 display：table-cell，vertical-align： middle
- 给父元素添加伪元素
- 弹性盒，父元素 display：flex，子元素 align-self：center
12. 如何让 chrome 浏览器显示小于 12px 的文字
本来添加谷歌私有属性 -webkit-text-size-adjust：none ， 现在 -webkit-transform：scale()
13. CSS 选择器有哪些，那些属性可以继承，优先级如何计算？ CSS3 新增的伪类有哪些
CSS2 选择器： 元素选择器，id 选择器，群组选择器，类选择器，通配符选择器，后代选择器
CSS2 伪类选择器：a:link/visited/hover/active
CSS3 选择器：空格 > +相邻兄弟选择器 ~通用选择器（查找后面所有）
结构伪类选择器：
查找第几个 nth-child（n）
查找同一类型第几个 nth-of-type
查找唯一类型 only-of-type
属性选择器：根据标签属性查找 [attr=value]
: root 查找根元素 html 标签
: empty 查找空标签
目标伪类选择器：（表单）
：enabled 查找可以使用的标签
：disabled 查找禁止使用的标签
：checked 查找被选中的标签
伪元素选择器 ：
：selection 设置选中文本内容的高亮显示（只能用于背 景色和文本颜色）
否定伪类选择器 not（）
语言伪类选择器 lang（取值）
优先级（权重）：
元素选择器 1
伪元素选择器 1
class 选择器 10
伪类选择器 10
属性选择器 10
Id 选择器 100
内联样式的权重 1000
包含选择器权重为权重之和
继承样式权重为 0
那些属性可以继承： CSS 继承特性主要是文本方面
所有元素可继承：visibility 和 cursor
块级元素可继承：text-indent 和 text-align
列表元素可继承：list-style，list-style-type，list-style-position， list-style-image
内联元素可继承：letter-spacing，word-spacing，line-height，color， font，font-family，font-size Font-style ， font-variant ， font-weight ， text-decoration ， text-transform，direction ,字母间距 段落间距 行高 字体颜色 字体种类 字体大小 字体样式 字体粗细 小型大写字母文本 文本修饰 转换不同元素中的文本 文本方向
14. 网页中有大量图片加载很慢 你有什么办法进行优化？
- 图片懒加载，在图片未可视区域加一个滚动条事件，判断图片位置与浏 览器顶端和页面的距离，如果前者小鱼后者，优先加载
- 使用图片预加载技术，将当前展示图片的前一张和后一张优先下载
- 使用 CSSsprite 或者 svgsprite
15. 行内元素/块级元素有哪些？
行内元素：相邻的行内元素会排列在同一行，不会独占一行 设置宽高无 效 span
块级元素：会独占一行 可以设置宽高等属性 div
可变元素：根据上下文决定该元素为块元素还是内联元素
块级元素：div h1-h6 hr p ul ol table address blockquote dir from menu
行内元素：a br I em img input select span sub sup u textarea
可变元素：button del iframe ins
16. 浏览器的标准模式和怪异模式区别？
标准模式：浏览器按照 W3C 标准解析执行代码
怪异模式：浏览器根据自己的方式解析执行代码，因为不同浏览器解析执行方式不一样，所以叫怪异模式
区别：
在怪异模式下，盒模型为怪异盒模型， 而在标准模式下为标准盒子模型，图片元素的垂直对齐方式对于行内元素和 table-cell 元素，标准模式下vertical-align 属性默认值是 baseline，而在怪异模式下，table 单元格中的图片的 vertical-align 属性默认值是 bottom，因此在图片底部会有几像素的空间
元素中的字体CSS中font的属性都是可以继承的，怪异模式下，对于table元素，字体的某些元素不能从其他封装元素继承中得到，特别是 font-size属性
内联元素的尺寸标准模式下，non-replaced inline 元素无法自定义大写， 怪异模式下，定义元素的宽高会影响元素的尺寸
元素的百分比高度当一个元素使用百分比高度时，在标准模式下，高度 取决于内容变化，在怪异迷失下，百分比被准确应用
元素溢出的处理标准模式下，overflow 取值默认值为 visible，在怪异模式下，这个溢出会被当做扩展 box 对待，就是元素的大小由内容决定， 溢出不会裁剪，元素框自动调整，包含溢出内容
17. margin 和 padding 在什么场合下使用
margin 外边距自身边框到另一个边框之间的距离
padding 内边距自身边距到自身内容之间的距离
当需要在 border 外侧添加空白时用 margin，当需要在 border 内侧添加空白时用 padding
18. 弹性盒子布局属性有那些请简述?
- flex-direction：弹性容器中子元素排列方式（主轴排列方式）
- flex-wrap：设置弹性盒子的子元素超出父容器时是否换行
- flex-flow：是 flex-direction 和 flex-wrap 简写形式
- align-item：设置弹性盒子元素在侧轴上的对齐方式
- align-content：设置行对齐
- justify-content：设置弹性盒子元素在主轴上的对齐方式
19. 怎么实现标签的禁用
添加 disabled 属性
20. Flex 布局原理
就是通过给父盒子添加 flex 属性，来控制子盒子的位置和排列方式
21. px，rem，em 的区别
- px，绝对长度单位，像素 px 是相对于显示器屏幕分辨率来说的
- em 相对长度单位，相对于当前对象内文本的字体尺寸
- em 的值并不是固定的
- em 会继承父级元素的字体大小（参考物是父元素的 font-size）
- em 中所有的字体都是相对于父元素的大小决定的
- rem 相对于 html 根元素的 font-size
- 1em=1rem=16px，在 body 中加入 font-size：62.5%，这样直接就是原来的 px 数值除以10 加上 em 就可以
22. 网页的三层结构有哪些
- 结构（HTML 或 XHTML 标记语言）
- 表现（CSS 样式表）
- 行为（JavaScript）
25. 请简述媒体查询
媒体查询扩展了 media 属性, 就是根据不同的媒体类型设置不同的 CSS 样式，达到自适应的目的。
26. rem 缺点
比如：小说网站，屏幕越小的移动设备如果用了 rem 肯定文字就越小， 就会导致看文章的时候特别费眼
27. 三栏布局方式两边固定中间自适应
- margin 负值法：左右两栏均左浮动，左右两栏采用负的 margin 值。 中间栏被宽度为 100%的浮动元素包起来
- 自身浮动法：左栏左浮动，右栏右浮动，中间栏放最后
- 绝对定位法：左右两栏采用绝对定位，分别固定于页面的左右两侧， 中间的主体栏用左右 margin 值撑开距离。
- flex 左右固定宽 中间 flex：1
- 网格布局
- table 布局
28. !DOCTYPE 作用
声明文档类型
29. 说一下 HTML5 drag api
- dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发，。
- darg：事件主体是被拖放元素，在正在拖放被拖放元素时触发。
- dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。
- dragover：事件主体是目标元素，在被拖放在某元素内移动时触发。
- dragleave：事件主体是目标元素，在被拖放元素移出目标元素是触发。
- drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发。
- dragend：事件主体是被拖放元素，在整个拖放操作结束时触发
30. 对 HTML 语义化标签的理解
HTML5语义化标签是指正确的标签包含了正确的内容，结构良好， 便于阅读，比如nav 表示导航条，类似的还有article、header、footer等等标签。
31. Web性能优化
降低请求量：合并资源，减少 HTTP 请求数，minify / gzip 压缩， webP，lazyLoad。加快请求速度：预解析 DNS，减少域名数，并 行加载，CDN 分发。
缓存：HTTP 协议缓存请求，离线缓存 manifest，离线数据缓存 localStorage。渲染：JS/CSS 优化，加载顺序，服务端渲染，pipeline。
32. 浏览器缓存机制
缓存分为两种：强缓存和协商缓存，根据响应的 header 内容来决强缓存相关字段有 expires，cache-control。如果 cache-control 与 expires 同时存在的话， cache-control 的优先级高于 expires。协商缓存相关字段有Last-Modified/If-Modified-Since ， Etag/If-None-Match
33. 浏览器输入网址到页面渲染全过程
- DN
- 解析 TCP
- 连接
- 发送 HTTP 请求
- 服 务 器 处 理 请 求 并 返 回
- HTTP 报文浏览器解析
- 渲染页面
- 连接结束
34. 画一条 0.5px 的线
采用 meta viewport 的方 式
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
采用 border-image 的方 式 采用 transform: scale() 的方式
35. 关于 JS 动画和 CSS3 动画的差异性
渲染线程分为main thread和 compositor thread，如果CSS动画只改变transform 和 opacity ， 这时整个CSS动画得以在compositor trhead 完成（而JS动画则会在main thread执行，然后出发 compositor thread 进行下一步操作），特别注意的是如果改变 transform 和 opacity 是不会 layout 或者 paint 的。
区别：
- 功能涵盖面，JS 比 CSS 大
- 实现/重构难度不一，CSS3 比 JS 更加简单，性 能跳优方向固定对帧速表现不好的低版本浏览 器，CSS3 可以做到自然降级
- CSS 动画有天然事件支持 CSS3 有兼容性问题
36. 双边距重叠问题（外边距折叠）
多个相邻（兄弟或者父子关系）普通流的块元素垂直方向 marigin 会重叠折叠的结果为：
两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。 两个外边距一正一负时，折叠结果是两者的相加的和。
37. 浮动清除
方法一：使用带 clear 属性的空元素在浮动元素后使用一个空元素如
<div class="clear"></div>，并在 CSS 中赋予.clear{clear:both;}属性
即可清理浮动。亦可使用
<br class="clear" />或<hr class="clear" />
来进行清理。
方法二：使用 CSS 的 overflow 属性
给浮动元素的容器添加 overflow:hidden;或 overflow:auto;可以清除 浮动，另外在 IE6 中还需要触发 hasLayout ，例如为父元素设置容器 宽高或设置 zoom:1。
在添加 overflow 属性后，浮动元素又回到了容器层，把容器高度撑起， 达到了清理浮动的效果。
方法三：给浮动的元素的容器添加浮动
给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使 其整体浮动，影响布局，不推荐使用。
方法四：使用邻接元素处理
什么都不做，给浮动元素后面的元素添加 clear 属性。方法五：使用 CSS 的:after伪元素
结合:after伪元素（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）和 IEhack ，可以完美兼容当前主流的各大浏览器，这里的 IEhack 指的是触发 hasLayout。给浮动元素的容器添加一个clearfix 的 class，然后给这个 class 添加一个:after 伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。
38. CSS 选择器有哪些，优先级呢
id 选择器，class 选择器，标签选择器，伪元素选择器，伪类选择器等同一元素引用了多个样式时，排在后面的样式属性的优先级高；
样式选择器的类型不同时，优先级顺序为：id 选择器 > class 选择器 > 标签选择器；
标签之间存在层级包含关系时，后代元素会继承祖先元素的样式。如果后代元素定义了与祖先元素相同的样式，则祖先元素的相同的样式属性会被覆盖。继承的样式的优先级比较低，至少比标签选择器的优先级低；
带有!important 标记的样式属性的优先级最高；
样式表的来源不同时，优先级顺序为：内联样式> 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式
39. CSS 动画如何实现
创建动画序列，需要使用 animation 属性或其子属性，该属性允许配置动画时间、时长以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是由@keyframes 规则实现，具体情况参见使用keyframes 定义动画序列小节部分。 transition 也可实现动画。
transition 强调过渡，是元素的一个或多个属性发生变化时产生的过渡效果，同一个元素通过两个不同的途径获取样式，而第二个途径当某种改变发生（例如 hover）时才能获取样式，这样就会产生过渡动画。
40. 如何实现元素的垂直居中
- 父元素 display:flex,align-items:center;
- 元素绝对定位，top:50%，margin-top：-（高度/2）
- 高度不确定用 transform： translateY（-50%）
- 父元素 table 布局，子元素设置 vertical-align:center;
41. CSS3 中对溢出的处理
text-overflow 属性，值为 clip 是修剪文本；ellipsis 为显示省略符号来表被修剪的文本； string 为使用给定的字符串来代表被修剪的文本。
42. 对 CSS 的新属性有了解过的吗？
CSS3 的新特性中，在布局方面新增了 flex 布局，在选择器方面新增了
例如：first-of-type,nth-child 等选择器，在盒模型方面添加了 box-sizing来改变盒模型，在动画方面增加了 animation，2d 变换，3d 变换等，在颜色方面添加透明，rbga 等，在字体方面允许嵌入字体和设置字体阴影，最后还有媒体查讯等
43. overflow 的原理
要讲清楚这个解决方案的原理，首先需要了解块格式化上下文，A block formatting context is a part of a visual CSS rendering of a Web page. It is the region in which the layout of block boxes occurs and in which floats interact with each other.翻译过来就是块格式化上下文是 CSS 可视化渲染的一部分，它是一块区域，规定了内部块盒 的渲染方式，以及浮动相互之间的影响关系
当元素设置了 overflow 样式且值部位 visible 时，该元素就构建了一个 BFC，BFC 在计算高度时，内部浮动元素的高度也要计算在内，也就是说技术 BFC 区域内只有一个浮动元素，BFC 的高度也不会发生塌缩，所以达到了清除浮动的目的。
44. CSS 定位
固定定位 fixed： 元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。Fixed 定位使元素的位置与文档流无关，因此不占据空间。Fixed 定位的元素和其他元素重叠。
相对定位 relative：如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。 在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
绝对定位 absolute：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。absolute 定位使元素的位置与文档流无关，因此不占据空间。 absolute 定位的元素和其他元素重叠。
粘性定位 sticky：元素先按照普通文档流定位，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。而后，元素定位表现为在跨越特定阈值前为相对定 位，之后为固定定位。
默认定位 Static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit: 规定应该从父元素继承 position 属性的值。
Javascript 相关
1. Js 基本数据类型有哪些
字符串 String 数值 Number 布尔 boolean null undefined 对象 数组
2. Ajax 如何使用
一个完整的 AJAX 请求包括五个步骤：
- 创建 XMLHTTPRequest 对象
- 使用 open 方法创建 http 请求，并设置请求地址，xhr.open（get/post，url，async，true（异步），false（同步））经常使用前三个参数
- 设置发送的数据，用 send 发送请求
- 注册事件（给 ajax 设置事件）
- 获取响应并更新页面
3. 如何判断一个数据是 NaN
NaN 非数字，但是用 typeof 检测是 number 类型
- 利用 NaN 的定义，用 typeof 判断是否为 number 类型并且判断是否满 足 isnan
- 利用 NaN 是唯一一个不等于任何自身的特点 n！==n
- 利用 ES6 中提供的 Object.is()方法（判断两个值是否相等） n==nan
JS中null与undefined区别
相同点：用 if 判断时，两者都会被转换成 false
不同点： number 转换的值不同number（null）为0 number（undefined）为 NaN
null 表示一个值被定义了，但是这个值是空值
undefined 变量声明但未赋值
5. 闭包是什么？有什么特性？对页面会有什么影响
闭包可以简单理解成：定义在一个函数内部的函数。其中一个内部函数，在包含它们的外部函数之外被调用时，就会形成闭包。
特点：
- 函数嵌套函数。
- 函数内部可以引用外部的参数和变量。
- 参数和变量不会被垃圾回收机制回收。
使用：
- 读取函数内部的变量；
- 这些变量的值始终保持在内存中，不会在外层函数调用后被自动清除。
优点：
- 变量长期驻扎在内存中；
- 避免全局变量的污染；
- 私有成员的存在 ；
缺点：会造成内存泄露
6. JS中常见的内存泄漏：
- 意外的全局变量
- 被遗忘的计时器或回调函数
- 脱离 DOM 的引用
- 闭包
7. 事件委托是什么？如何确定事件源（Event.target 谁调用谁就 是事件源）
事件委托就是利用事件冒泡，只制定一个事件处理程序， 就可以管理某一类型的所有事件。
事件委托，称事件代理，是 js 中很常用的绑定事件的技巧，事件委托就是把原本需要绑定在子元素的响应事件委托给父元素，让父元素担当事件监听的职务，事件委托的原理是 DOM 元素的事件冒泡
8. 什么是事件冒泡？
一个事件触发后，会在子元素和父元素之间传播，这种传播分为三个阶段：
- 捕获阶段（从 window 对象传导到目标节点（从外到里），这个阶段不会 响应任何事件）
- 目标阶段，（在目标节点上触发）
- 冒泡阶段（从目标节点传导回 window 对象（从里到外）），事件委托/事件代理就是利用事件冒泡的机制把里层需要响应的事件绑定到外层
9. 本地存储与 cookie 的区别
-
Cookie
Cookie 是小甜饼的意思。顾名思义，cookie 确实非常小，它的大小限制为 4KB 左右。它的主要用途有保存登录信息，比如你登录某个网站市场可以看到“记住密码”，这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。 -
LocalStorage
LocalStorage 是 HTML5标准中新加入的技术，它并不是什么划时代的 新东西。早在 IE 6 时代，就有一个叫 userData 的东西用于本地存储， 而当时考虑到浏览器兼容性，更通用的方案是使用 Flash。而如今， localStorage 被大多数浏览器所支持，如果你的网站需要支持 IE6+， 那以 userData 作为你方案是种不错的选择。 -
SessionStorage
SessionStorage 与 LocalStorage 的接口类似，但保存数据的生命周期与 LocalStorage 不同。做过后端开发的同学应该知道 Session 这个词的意思，直译过来是“会话”。而 SessionStorage 是一个前端的概念，它只是可以将一部分数据在当前会话中保存下来，刷新页面数据依旧存在。但当页面关闭后，SessionStorage 中的数据就会被清空。
三者的异同
最低0.47元/天 解锁文章
769
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
