localStorage、sessionStorage、Cookie的区别详解

localStorage、sessionStorage、Cookie共同点:

都保存在浏览器端,且是同源的(顺便解释一下同源:域名、协议、端口号相同)

localStorage、sessionStorage、Cookie不共同点:

  • 存储大小的不同:

localStorage的大小一般为5M
sessionStorage的大小一般为5M
cookies的大小一般为4K

  • 有效期不同:

localStorage的有效期为永久有效,除非你进行手动删除。
sessionStorage在当前会话下有效,关闭页面或者浏览器时会被清空。
cookies在设置的有效之前有效,当超过有效期便会失效

  • 与服务器端的通信

localStorage不参与服务器端的通信。
sessionStorage不参与服务器端的通信。
cookies参与服务器端通信,每次都会携带http的头信息中。(如果使用cookie保存过多数据会带来性能问题)

  • localStorage和sessionStorage的作用域的区别详解

不同浏览器无法共享localStorage或sessionStorage中的信息。
相同浏览器的不同页面间可以共享相同的 localStorage(页面属于相同域名和端口),但是不同页面或标签页间无法共享sessionStorage的信息。

参考文章

localStorage、sessionStorage、Cookie的区别详解

箭头函数和普通函数的区别

  • 箭头函数是匿名函数,不能作为构造函数,不能使用new;
  • 箭头函数不绑定arguments,取而代之用rest参数…解决;
  • 箭头函数不绑定this,会捕获其所在的上下文的this值,作为自己的this值;
  • 箭头函数通过call()apply()方法调用一个函数时,只传入了一个参数,对 this 并没有影响。;
  • 箭头函数没有原型属性;
  • 箭头函数不能当做Generator函数,不能使用yield关键字.

参考文章

箭头函数与普通函数的区别

6个代码在线调试工具,实时可视化编辑

codepen

最受欢迎的在线调试工具,案例可fork衍生出自己的版本,可以设置代码的预处理器,通过搜索等方式添加外部类库,代码分享社区完善.
https://codepen.io/pen/

jsfiddle

最早的较出名的在线调试工具,支持使用react、jq等30多个框架和库可供选择,可fork,代码可预处理.国内打开较慢.
http://jsfiddle.net/

jsbin

简单的在线调试工具,支持控制台功能,JS的预处理器较多,CSS较少
https://jsbin.com

jsrun

中文,对国内开发者友好.UI风格简洁,功能丰富强大,更多功能VIP收费,代码分享社区完善
http://jsrun.net/
其他

cssdeck

http://cssdeck.com/

Liveweave

界面漂亮、支持协作功能

https://liveweave.com/

css中BFC特性

BFC,即块格式化上下文。浏览器满足一定的条件时会形成一种叫块渲染区域,它会按照一定的规则进行渲染,它拥有以下特性:

  • BFC的块不会和浮动块重叠;
  • 计算BFC元素的高度时,会包括浮动元素;
  • 在一个BFC下的块 margin 会发生重叠,不在同一个则不会;
  • BFC元素是一个独立的容器,使得里面的元素和外部元素隔离开,互补影响
阅读全文

js运行时-eventLoop

JS引擎到底做了什么来解析代码之前,我们首先需要知道解析工作所发生的环境。
以V8引擎为例,V8引擎会根据需要将JS的解析工作放到一下四个容器里处理

  • 堆:用于存储函数变量和函数声明;
  • 栈:根据函数之间调用与被调用的关系形成一个栈的数据结构,被调用的函数压入栈顶;根据先进先出的原则,先执行
  • 栈顶函数,返回后弹出栈,直到栈空;
  • Web API容器:事件监听函数、HTTP/AJAX请求、或者是定时器函数等,一旦达到触发条件,将回调放至回调队列尾部;
  • 回调队列:按照先进后出的原则,当主程序栈空时,会通知回调队列,将队列首部的回调函数放至执行栈执行;触发的事件回调会放在队列尾部;
阅读全文

如何使用多个git(github)账号

我在公司开发已经使用了公司的git,配置了时使用的git已经存在了git账号,都要支持ssh

实现方案

git对用户信息配置有一下几种等级:

阅读全文

解决H5 键盘兼容性问题

ios和安卓设备在唤起和收起键盘时会展现不同的效果,利用Element.scrollIntoViewIfNeeded(),将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域,可以解决唤起键盘时输入框表单被挡等问题.

分析详见:https://juejin.im/post/5c6d1c8b6fb9a049de6df441

解决ios设备设备下页面滚动问题

如果你在safari浏览器和app内核浏览器中对需要滚动的元素设置如下样式时

1
overflow|overflow-x|overflow-y:scroll;

你会发现滚动区域的表现极其差劲,滚动在手指抬起时立即停止,不产生惯性滚动.

这时可以在以上样式的基础上通过添加-webkit-overflow-scrolling: touch;属性来实现ios下的惯性滚动效果.

1
2
overflow:scroll;
-webkit-overflow-scrolling: touch;

分析详见: https://juejin.im/post/5c6ebc8af265da2dec623d51

javascript实现数组去重

数组去重

利用ES6 Set去重(ES6中最常用)

1
2
3
4
5
6
7
8
function unique (arr) {
return Array.from(new Set(arr))
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];

console.log(unique(arr))

//[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {}, {}]

不考虑兼容性,这种去重的方法代码最少。这种方法还无法去掉“{}”空对象,后面的高阶方法会添加去掉重复“{}”的方法。

阅读全文

如何避免出现“cannot read property of undefined”错误

开发时经常会出现某对象属性为undefined,而继续获取下一层属性时导致报错,有以下方案可以避免错误的发生

使用方法库

lodash中的_.get或者Ramda 里的 R.path方法;
但有时只是想单纯避免出现这个错误,而不想引入整合类库造成不必要的浪费.

阅读全文