React简单封装LocalStorage方法

  • 未封装前使用
    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;
发布了75 篇原创文章 · 获赞 16 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/weixin_45416217/article/details/103089314
今日推荐