cookie,sessionStorage,localStorage分别是什么,以及三者之间的区别

sessionStorage、 localStorage 、 cookie 都是在浏览器端存储的数据。

三者之间的区别:

cookie:  

1.每个域名的存储量有限(一般是4k)

2.所有域名的存储量有限

3.会跟随请求被发送到服务器上

4.有个数限制,不同浏览器下,一个域名下cookie的个数有限,并且限制数量可能不一样

sessionStorage:

1.当浏览器窗口关闭的时候, sessionStorage 就会被销毁

2.存储容量大(一般比localStorage的存储容量大)

localStorage:

1.在客户端永久保存

2.单个域名的存储容量大(一般为5M)

3.总体数量无限制

link和@import的区别

由link和@import的区别引发的CSS渲染杂谈

我们都知道,外部引入 CSS 有2种方式,link标签和@import。
它们有何本质区别,有何使用建议,在考察外部引入 CSS 这部分内容时,经常被提起。

如今,很多学者本着知其然不欲知其所以然的学习态度,不求甚解,只求结论。
所以,本文遵循 css hack 的渐进识别原则,
结论 → 区别 → 争议 → 细节 → 祖坟 → 感想,逐渐加深理论层级,
力争每个 level 的读者,都能 get 到自己想要的内容,不必继续阅读下去。

结论

就结论而言,强烈建议使用link标签,慎用@import方式。
这样可以避免考虑@import的语法规则和注意事项,避免产生资源文件下载顺序混乱和http请求过多的烦恼。

区别

1.从属关系区别
@import是 CSS 提供的语法规则,只有导入样式表的作用;link是HTML提供的标签,不仅可以加载 CSS 文件,还可以定义 RSS、rel 连接属性等。

2.加载顺序区别
加载页面时,link标签引入的 CSS 被同时加载;@import引入的 CSS 将在页面加载完毕后被加载。

3.兼容性区别
@import是 CSS2.1 才有的语法,故只可在 IE5+ 才能识别;link标签作为 HTML 元素,不存在兼容性问题。

4.DOM可控性区别
可以通过 JS 操作 DOM ,插入link标签来改变样式;由于 DOM 方法是基于文档的,无法使用@import的方式插入样式。

5.权重区别(该项有争议,下文将详解)
link引入的样式权重大于@import引入的样式。

争议

不知从什么时候开始,当你在网上搜索link和@import的区别时,千篇一律的答案里就悄悄的多了一句“link引入的样式权重大于@import引入的样式”。
但是并没有一份答案,附带着对这句话的任何解释或实例。

这句话究竟是什么意思,该怎么理解呢?

发扬探索精神,我们不妨继续查阅资料。后来发现,还是有不少文章和帖子,对这句话表示质疑,进而自己写了 demo 去验证,验证的结果,确实无法与这句话相吻合。
而且,笔者也并未发现能清楚、正确、有理有据的解释这个结论到底对,还是不对的文章。

那么这个结论,最初是从哪里来的,可能已经无从考证了。

换个思维方式,不去争辩它的对错了,探索未果,我们就从这个结论的核心关键词“权重”出发,去研究它。

说到“权重”,有必要再解释一下:CSS 中的权重,指的是选择器的优先级。

CSS 选择器的权重高,即选择器的优先级高。
CSS 的优先级特性表现为,对同一 HTML 元素设置样式时,不同选择器的优先级不同,优先级低的样式将被高优先级的样式层叠掉。

CSS 权重优先级顺序简单表示为:
!important > 行内样式 > ID > 类、伪类、属性 > 标签名 > 继承 > 通配符

为了便于理解权重的计算方式,我们按以下方式进行数值假设分析:

选择器 权重
通配符 0
标签 1
类/伪类/属性 10
ID 100
行内样式 1000
important 1/0(无穷大)

 

原文链接 :

/www.cnblogs.com/my–sunshine/p/6872224.html