- 未封装前使用
1、首先我们在得到数据的方法中需要执行缓存数据
//执行缓存数据
localStorage.setItem('todolist',JSON.stringify(tempList))
2、在页面一加载时我们就需要加载数据 触发函数
componentDidMount(){
//获取缓存的数据
var todolist=JSON.parse(localStorage.getItem('todolist')); /*字符串*/
}
当我们需要多次使用一个方法时,我们可以选择将这个方法进行封装来提高复用性
- 封装后
1、首先引进封装的方法
//引入自定义模块
import storage from '../model/storage';
2、当我们再次需要执行缓存数据时
//执行缓存数据
storage.set('todolist',tempList);
3、获取缓存数据时
//获取缓存的数据
var todolist=storage.get('todolist');
4、封装的LocalStorage
方法
var storage={
set(key,value){
localStorage.setItem(key,JSON.stringify(value));
},
get(key){
return JSON.parse(localStorage.getItem(key));
},remove(key){
localStorage.removeItem(key)
}
};
export default storage;