在较高版本的浏览器中，js提供了sessionStorage和globalStorage。在HTML5中提供了localStorage来取代globalStorage。
Html5中的WebStorage包括了两种存储方式：sessionStorage和localStorage。
sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。
而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
webstorage和cookie的区别WebStorage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。
除此之外，WebStorage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。
但是cookie也是不可以或缺的：cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在，而WebStorage仅仅是为了在本地“存储”数据而生
浏览器的支持除了IE７及以下不支持外，其他标准浏览器都完全支持(ie及FF需在web服务器里运行)，值得一提的是IE总是办好事，例如IE7、IE6中的userData其实就是JavaScript本地存储的解决方案。通过简单的代码封装可以统一到所有的浏览器都支持webstorage。
localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等
cookie和session的区别：1、cookie数据存放在客户的浏览器上，session数据放在服务器上。2、cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗考虑到安全应当使用session。3、session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能考虑到减轻服务器性能方面，应当使用COOKIE。4、单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。5、所以个人建议：将登陆信息等重要信息存放为SESSION其他信息如果需要保留，可以放在COOKIE中
display:none和visibility:hidden的区别？
display:none隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。visibility:hidden隐藏对应的元素，但是在文档布局中仍保留原来的空间。
CSS中link和
import的区别是？(1)link属于HTML标签，而
import是CSS提供的;(2)页面被加载的时，link会同时被加载，而import被引用的CSS会等到引用它的CSS文件被加载完再加载;(3)import只在IE5以上才能识别，而link是HTML标签，无兼容问题;(4)link方式的样式的权重高于import的权重.position:absolute和float属性的异同
共同点：对内联元素设置float和absolute属性，可以让元素脱离文档流，并且可以设置其宽高。
不同点：float仍会占据位置，absolute会覆盖文档流中的其他元素。
介绍一下box-sizing属性？
box-sizing属性主要用来控制元素的盒模型的解析模式。默认值是content-box。
content-box：让元素维持W3C的标准盒模型。元素的宽度/高度由border+padding+content的宽度/高度决定，设置width/height属性指的是content部分的宽/高
border-box：让元素维持IE传统盒模型（IE6以下版本和IE6~7的怪异模式）。设置width/height属性指的是border+padding+content
标准浏览器下，按照W3C规范对盒模型解析，一旦修改了元素的边框或内距，就会影响元素的盒子尺寸，就不得不重新计算元素的盒子尺寸，从而影响整个页面的布局。
CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？CSS3新增伪类有那些？
1.id选择器（#myid）2.类选择器（.myclassname）3.标签选择器（div,h1,p）4.相邻选择器（h1+p）5.子选择器（ulli）6.后代选择器（lia）7.通配符选择器（*）8.属性选择器（a[rel="external"]）9.伪类选择器（a:hover,li:nth-child）
优先级为:
!importantidclasstag
important比内联优先级高,但内联比id要高
CSS3新增伪类举例：
p:first-of-type选择属于其父元素的首个p元素的每个p元素。p:last-of-type选择属于其父元素的最后p元素的每个p元素。p:only-of-type选择属于其父元素唯一的p元素的每个p元素。p:only-child选择属于其父元素的唯一子元素的每个p元素。p:nth-child(2)选择属于其父元素的第二个子元素的每个p元素。:enabled:disabled控制表单控件的禁用状态。:checked单选框或复选框被选中。
CSS3有哪些新特性？
CSS3实现圆角（border-radius），阴影（box-shadow），对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）transform:rotate(9deg)scale(0.85,0.90)translate(0px,-30px)skew(-9deg,0deg);//旋转,缩放,定位,倾斜增加了更多的CSS选择器多背景rgba在CSS3中唯一引入的伪元素是::selection.媒体查询，多栏布局border-image
CSS3中新增了一种盒模型计算方式：box-sizing。盒模型默认的值是content-box,新增的值是padding-box和border-box，几种盒模型计算元素宽高的区别如下：
content-box（默认）布局所占宽度Width：
Width=width+padding-left+padding-right+border-left+border-right12
布局所占高度Height:
Height=height+padding-top+padding-bottom+border-top+border-bottom12padding-box
布局所占宽度Width：
Width=width(包含padding-left+padding-right)+border-top+border-bottom12
布局所占高度Height:
Height=height(包含padding-top+padding-bottom)+border-top+border-bottomborder-box
布局所占宽度Width：
Width=width(包含padding-left+padding-right+border-left+border-right)
布局所占高度Height:
Height=height(包含padding-top+padding-bottom+border-top+border-bottom)
对BFC规范的理解？
BFC，块级格式化上下文，一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。在同一个BFC中的两个毗邻的块级盒在垂直方向（和布局方向有关系）的margin会发生折叠。（W3CCSS2.1规范中的一个概念，它决定了元素如何对其内容进行布局，以及与其他元素的关系和相互作用。
（如果对文章中答案有一些疑义和不懂的地方，后续我会持续更新相关知识点内容）