本地存储方式
- 1、localStorage和sessionStorage
- 1.1、sessionStorage
- 1.2、localStorage
- 1.3、三种存储方式对比
- 1.4、localStorage的简单封装
- 2、同步和异步
- 2.1、同步
- 2.2、异步
- 2.3、常见的异步任务
- 2.4、前端异步解决方案
- 2.5、实现异步任务执行的先后顺序
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可以避免层层嵌套的回调函数。
未完待续…