本地存储方式

1、localStorage和sessionStorage

html5中的Web Storage包括了两种存储方式：localStorage和sessionStorage，它们都是用来存储客户端临时信息的对象。

1.1、sessionStorage

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问，并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅是会话级别的存储，且只允许同一窗口访问。

• 存储数据

	sessionStorage.setItem('key','value');

• 获取数据

	sessionStorage.getItem('key');

1.2、localStorage

localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的，同源可以读取并修改localStorage数据。

• 存储数据

	localStorage.setItem('key','value');

• 获取数据

	localStorage.getItem('key')；

• 删除数据

	localStorage.removeItem('key');

• 清空所有数据

	localStorage.clear();

1.3、三种存储方式对比

1.4、localStorage的简单封装

//清空所有localStorage的数据
function clearData(){
	localStorage.clear();
}

//获取数据
function getData(){
	var collection=localStorage.getItem("todo");
	if(collection!=null){
		return JSON.parse(collection);
	}
	else return [];
}

//存储数据
function saveData(key,data){
	localStorage.setItem(key,JSON.stringify(data));
}

2、同步和异步

2.1、同步

同步任务：是指在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行下一个任务。这就产生了一个问题，如果前一个任务的耗时就比较长，后续的任务则需要等待前一个任务完成，从而阻塞代码的执行。

2.2、异步

异步任务：在程序运行的时候，如果前一个任务比较耗时，并不会等待任务返回结果，而是继续执行后续的任务。当前一个任务结果返回以后，再去执行相关的任务。异步任务很好的解决了代码运行中的阻塞问题。

2.3、常见的异步任务

• 定时器：setTimeout setInterval
• ajax的异步请求
• es6的promise

2.4、前端异步解决方案

• 回调函数(callback)

    回调函数方式解决异步函数取值问题；
  

正常情况下：

function getNum() {
      setTimeout(function () {
          return 10
      }, 1000)
}
//无法拿到 10,因为异步函数会在函数调用结束后才执行
console.log(getNum());

那怎样才能拿到10呢？

// 主函数
function getTea(callback){
      setTimeout(function(){
          callback('10');
      },500)
  }

// 定义回调函数,将它作为参数传给主函数
getTea(function(data){
    console.log(data);//10
})

2.5、实现异步任务执行的先后顺序

function getTea(callback) {
      setTimeout(function () {
           callback('吃');
      }, 3000)
}

function getHotpot(callback) {
      setTimeout(function () {
           callback('喝')
      }, 8000)
}

// 一层一层嵌套,根据代码嵌套关系顺序执行
getHotpot(function (data) {
       console.log(data);
       getTea(function (data) {
            console.log(data);
       })
})

那么，如果有很多个异步任务呢？
那就会造成回调地狱（回调函数的层层嵌套）。

于是，es6之后，新增的promise可以避免层层嵌套的回调函数。

未完待续…