CSS
1、那些样式可以继承
1.继承：color,line-hight,text-align,font-size,visbility,z-index,text-decoration
2.不继承：border、margin、background、height、width、padding、float、left、top。。
2、css选择器及优先级
1.选择器种类：id选择器，类选择器，伪类选择器，属性选择器，标签选择器，伪元素选择器
2.选择器优先级：id>类=伪类=属性>标签=伪元素
3.样式表优先级：内联样式（html标签内）>内部样式>外部样式>浏览器用户自定义样式>浏览器默认样式
4.注意事项
!important声明的样式的优先级最高
如果优先级相同，则最后出现的样式生效
继承得到的样式的优先级最低(权重为0)
3、伪元素和伪类的区别和作用？
1.伪元素：在内容的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成
2.伪类：将特殊的效果添加到特定选择器上，它是已有元素上添加类别的，不会产生新的元素。
4、说一下css盒子模型
就是用来装页面上元素的矩形区域，css中的盒子包括IE盒子模型和标准的W3C盒子模型
1.在标准的盒子模型中，width指content部分的宽度，在IE盒子模型中，width表示content+padding+border这三个部分的宽度
2.标准盒子模型的盒子宽度：左右border+左右padding+width
3.IE盒子模型的盒子宽度：width
box-sizing
包括：content-box、border-box、inherit
content-box：高度和宽度分别应用到元素的内容框，在高度和宽度之外绘制元素的内边距和边框（标准盒子模型）
border-box:为元素设置的高度和宽度决定了元素的边框和内边距（IE盒子模型）
inherit：继承父元素的box-sizing
5、垂直水平居中的方法
1.水平居中
1）行内元素：text-align：center
2）块级元素
margin：0 auto
父元素：display：flex + justify-content：center
子绝父相+ left:50% + transform：translateX（-50%）
display：flex + margin：0 auto
display：table，margin：0 auto
2.垂直居中
1）纯文本：line-height
2）子绝父相 + top:50% + transform：translateY(-50%)
3）子元素：margin：auto 0 + 父元素display：flex
4) 父元素：display:flex， align-items: center
5）display:table+display:table-cell + vertical-align: middle
3.垂直水平居中
1）子绝父相+left + top + transform：translate()
2) 子元素：mrigin:auto + 父元素：display:flex
3）父元素display：flex + justify-content: center + align-items: center;
6、清除浮动
1.给父级定义height高度
2.在最后一个浮动元素后添加带有clear：both的空元素
3.父级添加overflow：hidden（不推荐）[添加overflow属性后，浮动元素又回到了容器中，把容器撑起来了，影响布局]
3.父级定义伪元素:after
.clearfix:after {
content: "";
display: block;
visibility: hidden;
height: 0;
clear: both;
}
4.双伪元素法：.clearfix:after,.clearfix:before
总结：其实就是在浮动元素后面添加一空元素
7、外边距塌陷问题
多个相邻（兄弟或者父子关系）普通流的块元素垂直方向margin会重叠【重叠只会出现在垂直方向】
1.表现：
两个相邻的外边距都是正数时，取较大值
两个相邻的外边距都是负数时，取绝对值较大值
两个相邻的外边距一个正数，一个负数时，取两者和
2.解决：
1）父子关系【将一方变成BFC】
父元素加入（overflow:hidden）
父元素添加透明边框（border：1px solide transparent）
子元素变成行内盒子（display:inline-block）
子元素加入浮动属性或者定位
2）兄弟关系【将一方变成BFC】
底部元素变为行内盒子（display：inline-block）
底部元素设置浮动（float）
底部元素的position的值为（absolute、fixed）
8、flex布局
‘弹性布局’
包括属性：
1）flex-direction：决定主轴的方向[row、row-reverse、column、column-reverse]
2）flex-wrap：换行方式[wrap、nowrap、wrap-reverse]
3）flex-flow：flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
4）justify-content：主轴上的对齐方式
5）align-items：测轴的对齐方式
6）align-content：多根轴线的对齐方式
9、position属性
1.fixed
元素的位置相对于浏览器窗口是固定位置，无论窗口是否滚动，元素都会留在那个位置；
元素的位置与文档流无关，因此不占据空间，定位的元素和其他元素重叠
2.relative
相对于其原来的位置进行定位
无论是否进行移动，元素任然占据原来的空间
3.absolute
绝对定位的元素的位置相对于最近的已定位的父元素，如果父元素没有设置定位，那么它的位置已body为依据；
元素的位置与文档流无关，不占据空间
4.sticky
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位
5.static
默认值，没有定位，元素出现在正常的文档中
6.inherit
规定从父元素继承position属性的值
二、absolute和fixed区别
1.相同点
1）改变元素的呈现方式，将display设置为inline-block
2）使元素脱离普通文档流，不再占据文档物理空间
3）覆盖非定位文档元素
2.不同点
1）根元素不一样
2）在有滚动的页面中，absolute会跟着父元素进行移动，fixed固定在页面的具体位置
10、什么是BFC？
1.BFC（块级格式化上下文）是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中盒内与行盒都会垂直沿着其父元素的边框排列
2.BFC的布局规则
1）内部的box会在垂直方向，一个接一个的放置
2）box垂直方向的距离由margin决定，属于同一个BFC的相邻box的margin会发生重叠
3）BFC的区域不会与浮动的盒子重叠
4）BFC是一个独立的容器，外面的元素不会影响里面的元素，反之也如此
5）计算BFC的高度时，浮动元素也参与计算
3.触发条件
1）浮动元素（float的值不是none）
2）定位元素（position为fixed与absolute）
3）display为inline-block、table-cell、table-caption、flex、inline-flex等
4）overflow不为visible的块元素
4.作用
1）解决margin的重叠问题：BFC是一个独立的区域，内部的元素和外部的元素互不影响，将两个元素变成为两个BFC。
2）解决高度塌陷的问题：对子元素设置浮动后，父元素会发生高度塌陷，只需要将父元素设置为一个BFC即可（overflow：hidden）
3）创建自适应两栏布局：左侧设置为float：left，右侧设置为（overflow：hidden），这样右边就触发了BFC，BFC区域不会与浮动元素发生重叠。
11、position、float、display区别
可以把它看作是一个类似优先级的机制，
1."position:absolute"和"position:fixed"优先级最高，有它存在的时候，浮动不起作用，'display'的值也需要调整；
2.其次，元素的'float'特性的值不是"none"的时候或者它是根元素的时候，调整'display'的值；
3.最后，非根元素，并且非浮动元素，并且非绝对定位的元素，'display'特性值同设置值
12、单行、多行文本溢出隐藏
1.多行文本溢出
overflow：hidden;
text-overflow：ellipsis;
display：-webkit-box;
-webkit-box-orient：vertical;
-webkit-line-clamp：2;
2.单行元素的文本省略
overflow：hidden;
text-overflow：ellipsis;
white-space: nowrap；
13、block、inline、inline-block的区别
1.block:块元素，独占一行，width和height无效，margin和padding
2.inline:行元素，不会独占一行，width和height会失效，并且在垂直方向的padding和margin也会失效
3.inline-block：行内元素，不会独占一行，width和height有效
4.常见
行内元素：a,b,span,img,input,select,strong
块级元素：div,ul,ol,li,dt,dd,h1,h2...,p
5.替换元素（虽然为inline，但可以设置高宽）
img属于替换元素，替换元素一般有内在尺寸和宽高比，所以具有width和height，可设定
HTML中的替换元素：img、input、textarea、select
14、使用display：inline-block会产生什么问题？解决办法？
1.问题：两个display：inline-block元素放在一起会产生一段空白
2.产生的原因：
元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据css中white-space属性的处理方式（默认是normal，合并多余空白），原来HTMl代码中的回车换行被转换成一个空白符，在字体不为0的情况下，空白符占据一定宽度，所以inline-block的元素之间就出现了空隙。
3.解决办法：
1）消除两个元素之间的空格或回车换行，写在一起
2）父元素中设置font-size：0
3）为子元素这只float：left
15、display、visibilty、opacity（隐藏元素）
1.display:none
元素不会在页面中占据位置，也不会响应绑定的监听事件【会影响布局，相当于将该元素删除】（非继承属性，会引发重排）
2.visibilty：hidden
元素在页面中仍占据空间，但是不会响应绑定的监听事件。（继承属性，引发重绘）
3.opacity:0
不会影响页面布局，任占据空间，会触发元素已经绑定的事件
4.position移到外部
5.z-index图层遮盖
6.transform: scale(0,0)：将元素缩放为 0，来实现元素的隐藏。这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。
16、link标签和import标签的区别
1.link属于html标签，而@import是css提供的
2.页面被加载时，link同时也会别加载，而@import引用的css会等页面加载完毕后，加载
3.link是html标签，因此没有兼容性，而@import只有ie5以上才能识别
4.link方式引入的样式权重比@import高
17、css3新特性
1.颜色：rgba、hsla模式
2.盒子：box-shadow、borde-radius、text-shadow、box-sizing
3.背景：background-size、background-origin（设置背景图的原点）、-chilp(背景图的裁切区域)
4.渐变：linear-gradient、radial-gradient
5.过渡：transition，可实现动画
6.自定义动画：@keyfrom
7.媒体查询，多栏布局 @media screen and (width:800px){}
8.唯一引入的伪元素 ::selection
9.2D转换：transform: translate()、rotate()、scale()
10.3D转换：transform: rotateX()、rotateY()
11.字体图标 font-face
12.弹性布局flex
18、transition和animation的区别
1.transition：强调过渡，是元素的一个或多个属性发生变化的过渡过程。（谁做过渡给谁加）
2.animation：创建动画序列，该属性允许配置动画时间、时长以及其他动画细节，但不能配置动画的实际表现，动画的实际表现由@keyframes规则实现
3.区别
transition:需要触发一个事件才能改变属性，只有2帧（from,to）
animation:不需要触发任何事件，设定好时间之后可以自己执行，可以一帧一帧的（多帧）
19、常见的图片格式及使用场景
1.BMP：无损，几乎没有对数据进行压缩，通常是较大的文件
2.GIF：无损，适用于对色彩要求不高同时需要文件体积较小的场景
3.JPEG：有损，会导致图片模糊，适合用来存储照片
4.PNG-8：非常好的GIF格式替代者
5.PNG-24
6.SVG：无损的矢量图，方法不会失真，适合用来挥着logo。icon等
7.WebP：兼容性不好，就是说相同质量的图片，WebP具有更小的文件体积
20、line-height的理解
1.概念：
1)一个容器没有设置高度，那么撑开容器高度的是 line-height，而不是容器内的文本内容；
2)把 line-height 值设置为 height 一样大小的值可以实现单行文字的垂直居中；
3)line-height 和 height 都能撑开一个高度
21、css优化和提高性能的方法
1.加载性能
1）css压缩
2）css单一样式
3）较少@import，建议使用link（后者同页面一起加载，前者需等页面加载完毕再加载）
2.选择器性能
1）关键选择器
2）了解哪些属性是可以通过继承而来的，然后避免对这些属性重复指定规则
3）尽量少的去对标签进行选择，而是用class
3.性能渲染
1）慎重使用高性能属性：浮动，定位
2）尽量减少页面重拍，重绘
3）属性值为0时，不加单位
4）css雪碧图
5）选择器优化嵌套，尽量避免层级过深
4.可维护性，健壮性
1）将具有相同属性的样式抽离出来，整合并通过class在页面中进行使用
2）样式与内容分离，将css代码定义到外部css中
22、预处理器是什么，为什么要使用
1.预处理器：其实就是 CSS 世界的“轮子”。预处理器支持我们写一种类似 CSS、但实际并不是 CSS 的语言，然后把它编译成 CSS 代码：
LESS：是一种动态样式语言，将 CSS 赋予了动态语言的特性，如变量，继承，运算， 函数，LESS 既可以在客户端上运行 (支持 IE 6+, Webkit, Firefox)，也可以在服务端运行 (借助 Node.js)
2.使用理由
1）结构清晰，便于扩展，易维护
2）可以轻松实现多层继承，完全兼容css代码，可以方便地应用到老项目中
23、后处理器（Postcss）
1.PostCss：处理的就是 CSS 本身，它可以编译尚未被浏览器广泛支持的先进的 CSS 语法
2.使用场景
1）提高css代码的可读性
2）当我们css代码需要适配低版本浏览器时，PostCss 的 Autoprefixer 插件可以帮助我们自动增加浏览器前缀；
3）允许我们编写面向未来的 CSS
24、常见的css布局单位
1.px：页面布局的基础，一个像素表示终端屏幕所能显示的最小的区域
2.%：当浏览器的宽度或者高度发生变化时，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果（一般相对于直接父元素）
3.em：文本相对长度单位，（相对于父元素的字体大小倍数）
4.rem：一个相对单位，相对于根元素（html元素）的font-size的倍数
5.vw/vh：是与视图窗口有关的单位，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度
25、两栏、三栏布局的实现
1.左侧浮动+右侧margin
2.左侧浮动+右侧BFC（overflow：hidden）
3.flex+左侧固定宽度+右侧flex：1
4.左侧定位+右侧margin-left
5.左右都定位
三栏布局
1.左右定位+中间设置对应方向大小的margin
2.左右浮动+中间设置对应方向大小的margin
3.flex布局+左右侧设置固定大小+中间flex：1
26、媒体查询的理解
使用 @media 查询，可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是需要设置设计响应式的页面，@media 是非常有用的。
当重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
27、三种文档流
1.普通流
1)普通流中，盒子一个接着一个排列
2）块级格式化上下文里，盒子竖着排列；行内格式化上下文中，盒子横着排列
3）当position为static或relative，并且float为none时会触发普通流
4）position：static、relative，盒的位置是常规流布局里的位置
2.定位流：
1）盒从常规流中被移除，不影响常规流的布局
2）postion为fixed或absoulte时
3.浮动流
1）float
2）除非设置clear，否则普通流环绕在其周围
28、画一条0.5px的线
1.transform：scale（0.5,0.5）【2D的缩放转换】
2.采用meta viewport的方式：只针对于移动端，只在移动端上才能看到效果【initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5】
29、设置小于12px的字体
1.只要加了-webkit-text-size-adjust:none;字体大小就不受限制了【chorme27版本后不支持】
2.使用css3的transform缩放属性-webkit-transform:scale(0.5)【但缩放的是整个元素的大小】
3.使用图片
30、解决1px的问题
1.产生原因：在一些 Retina屏幕 的机型上，移动端页面的 1px 会变得很粗，呈现出不止 1px 的效果【CSS 中的 1px 并不能和移动设备上的 1px 划等号】
2.解决
1）直接写0.5px：获取window.devicePixelRatio的值，知道物理像素比的值，然后进行缩小（兼容性不好）
2）viewport 缩放来解决（整个页面也被缩小了）
31、js动画和css3动画的区别
1.js动画
优点：
1）可在动画播放过程中对其进行开始、暂停、回放、终止、取消等控制
2）动画效果丰富，可以实现一些复杂效果，如：视差滚动等
3）不存在兼容性问题
缺点：
1）干扰主线程导致阻塞，造成丢帧情况
2）复杂复杂度高
2.CSS3动画
优点：
1）浏览器会对CSS3动画进行优化
2）代码相对简单
缺点：
1）CSS3动画只能暂停，运行过程控制较弱，无法附加事件绑定回调函数
2）代码冗长，部分动画无法实现
3）兼容性不好
32、逐渐递增与优雅降级
1.逐渐递增
针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高版本浏览器进行效果、交互等改进和追加功能达到更好的用户体验
2.优雅降级
一开始就构建完整的功能，然后针对低版本浏览器进行兼容
HTML
1、doctype的作用是什么？它的混杂模式和标准模式怎么区分？它们都有什么意义？
1.doctype的作用
告诉浏览器使用哪个版本的HTML规范来渲染文档，doctype形式不正确或不存在时，会导致HTML文档以混杂模式进行渲染
2.混杂模式
混杂模式中的页面时一种比较宽松的向后兼容的方式显示
3.标准模式
是浏览器所支持的最高标准运行
2、常见块级元素和行内元素
行内元素有：a b span img input select strong；
块级元素有：div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p；
3、src和href的区别
src和href都是用来引用外部的资源
1.src：表示对资源的引用，它指向的内容会嵌入当前标签所在的位置，src会将其指向的资源下载并应用到文档中，如js请求，当浏览器解析到元素时，会暂停其他资源的下载和处理，直到将该资源加载，编译，执行完成。所以一般将js脚本放在页面底部。
2.href：表示超文本引用，它指向一些网络资源，建立和当前元素或文档的连接关系，当浏览器识别到它指向的文件时，就会并行下载资源，不会停止对当前文档的处理，常用在a、link标签上。
4、defer和async的区别
defer 和 async属性都是去异步加载外部的JS脚本文件，它们都不会阻塞页面的解析
区别：
1.执行顺序：多个带async属性的标签，不能保证加载的顺序，多个带defer属性的标签，按照加载的顺序执行
2.脚本是否并行执行：
1）async属性，会使脚本异步加载，不会阻塞页面的解析过程，但是当脚本加载完成后立即执行 js 脚本，这个时候如果文档没有解析完成的话同样会阻塞；
2）defer属性，后续文档的加载过程和js脚本的加载是并行的，js脚本需要等到所有元素解析完成之后才执行，DOMContentLoaded事件触发执行之前。
5、常用的meta标签有那些
定义：meta标签由name和content属性定义，用来描述网页文档的属性，比如网页的作者，网页描述，关键词等。
2.常见：
charset：用来描述HTML文档的编码类型
keywords：页面关键词
description：网页描述
refresh：页面重定向和刷新
viewport：适配移动端，可以控制视口的大小和比列
6、无样式内容闪烁（FOUC）
1.原因
@import导入css文件会等到文档加载完再加载css样式，因此，回出现一段时间页面上的内容是没有样式的
2.解决
采用link标签去引入样式
7、html5新特性
1.拖拽释放（Drag and drop）API
2.自定义属性：data-id(setAttribute,getAttribute)
3.新标签（语义化更好）：header、nar、footer、aside、section
4.音频、视频API（audio、video）
5.画布（Canvas）、地理（Goelocation）、websocket(通信协议)
6.本地存储（localStorage）:长期存储，浏览器关闭任有效
7.浏览器存储（sessionStorage）：浏览器关闭后自动删除
9.表单控制：calendar、data、time、email、url、tel、color、file..
10.DOM查询操作：querySelector（）、querySelectorAll（）
11.history:go,forword,back,pushstate
8、html语义化
1.意义：根据内容的结构化，选择合适的标签，便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好的解析。
2.注意：
1）尽可能少使用无语义的标签div和span
2）在语义不明显时，尽量使用p，因为p标签在默认情况下有上下间距，对兼容特殊终端有利
3）不要使用纯样式标签，如：b,font；改用css设置
4）需要强调的文本，可以包含在strong或者em标签中，但能用css尽量使用css
5）使用表格时，标题要用caption，表头用head，主体部分用tbody包围，尾部用tfoot包围
6）表单域要用 fieldset 标签包起来，并用 legend 标签说明表单的用途；
9、svg与canvas的区别
1.canvas是h5提供的绘图方法，svg已经有很久的历史
2.canvas画图基于像素点，放大或缩小会失真；svg基于图形，用html标签描绘形状，放大缩小不会失真。
3.canvas需要在js中绘制；svg在html绘制
4.canvas支持颜色比svg多
5.canvas无法对已经绘制的图像进行修改操作；svg可以获取标签进行操作
10、title和alt属性区别
1.两个属性都是鼠标放在元素上的时候显示
2.alt是img的特有属性，是在图片无法正常显示时的代替文字
3.title属性是大部分元素的属性，用来对dom元素的一种类似注释说明
11、form表单提交
1.form标签中添加Action和method，且有一个submit按钮就可以进行数据提交，（input标签必须都要有一个name属性），这种提交会进行页面的跳转
2.无刷新页面提交：通过一个隐藏的iframe实现，form表单的target设置为iframe的name名称，form提交目标为当前页面iframe则不会刷新页面
3.js事件触发表单提交，通过button、链接等触发事件，js调用submit方法提交表单数据
4.Ajax异步提交表单：通过js获取input、select等元素的值，将这些值组成json格式，通过异步的方式和服务端进行交互。
12、HTML5的离线存储怎么使用，其原理？
1.离线存储指的是：在用户没有与英特网连接时，可以正常访问站点或应用；在用户与因特网联网时，更新用户机器上的缓存文件。
2.原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。
3.使用：
1）创建一个和 html 同名的 manifest 文件，然后在页面头部加入 manifest 属性， 2）在 cache.manifest 文件中编写需要离线存储的资源
4.更新缓存：
1）更新manifest文件
2）通过JavaScript操作
3）清除缓存
5.注意事项
1）浏览器对缓存数据的容量限制可能不太一样
2）如果 manifest 文件，或者内部列举的某一个文件不能正常下载，整个更新过程都将失败，浏览器继续全部使用老的缓存
3）引用 manifest 的 html 必须与 manifest 文件同源，在同一个域下
4）FALLBACK 中的资源必须和 manifest 文件同源
13、浏览器是如何对HTML5的离线储存资源进行管理和加载？
1.在线的情况下：浏览器发现 html 头部有 manifest 属性，它会请求 manifest 文件，如果是第一次访问页面 ，那么浏览器就会根据 manifest 文件的内容下载相应的资源并且进行离线存储。如果已经访问过页面并且资源已经进行离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的 manifest 文件与旧的 manifest 文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，就会重新下载文件中的资源并进行离线存储。
2.离线的情况：浏览器会直接使用离线存储的资源
14、iframe有那些优缺点？
1.iframe元素会创建包含另外一个文档的内联框架
2.优点
用来加载速度较慢的内容（广告）
可以使脚本并行下载
可以实现跨子域通信
3.缺点
iframe会阻塞主页面的onload事件
无法被一些搜索引擎识别
会产生很多页面，不容易管理
15、lable作用？使用？
1.作用：label标签来定义表单控件的关系：当用户选择label标签时，浏览器会自动将焦点转到和label标签相关的表单控件上。
2.使用
1）label的for和表单的name属性相同
2）直接将input表单嵌入lable标签
存储
1、什么是web Worker?有什么用？
作用：它是独立运行在后台的js,独立于其他脚本，不会影响页面的性能。并且通过postMessage将结果回传到主线程，这样在进行复杂操作的时候，就不会阻塞主线程。
作用:
如果我们可以将这个烦琐的代码移动到一个JavaScript文件中，并异步运行，那么就意味着浏览器不必等待循环，这样我们提高了浏览器的敏捷度。
web worker有助于异步执行JavaScript文件
2、cookies与session区别
1.cookie数据存放在客户的浏览器上，session数据放在服务器上
2.cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗,如果主要考虑到安全应当使用session
3.session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能，如果主要考虑到减轻服务器性能方面，应当使用COOKIE
4.单个cookie在客户端的限制是4K
5.所以：将登陆信息等重要信息存放为SESSION;其他信息如果需要保留，可以放在COOKIE中
3、cookie,sessionStorage和localStorage的区别？
1.cookie在浏览器和服务器之间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存
2.存储大小限制不同：cookie数据不超过4k,因为每次http请求都会携带cookie，所以cookie只适合很小的数据。而后两者数据比cookie大的多，sessionStorage约为5M，localStorage约20M
3.数据有效期不同：cookies过期时间之内一直有效，sessionStorage仅当浏览器窗口关闭之前有效，localStorage始终有效
4.作用域不同：sessionStorage不在不同的浏览器窗口中共享，即使是同一页面；localStorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的
5.补充：
setItem(key,value)
getItem(key)
removeItem(key)
clear()
key(n):索引
4、如何实现浏览器内多个标签页之间的通信?
1.在标签页之间，调用localstorage,cookies等数据存储，可以实现标签页之间的通信。
2.注意：Safari 在无痕模式下设置 localstorge 值时会抛出 QuotaExceededError 的异常
