封装localstorage本地存储

前不久看完vuex之后，发现操作起来还是需要一定的逻辑空间，操作也不是那么的爽，并且刷新之后状态还会丢失，所以小编自己整了个结合localstorage去封装了一个本地状态存储的工具。

localstorage是什么

localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。localStorage 属性是只读的。

localstorage封装本地状态管理方法

存储状态

// name 为存储的localstorage 对象的名字，value为存储对象的值
function setState(name,value){
 return localStorage.setItem(name, value);
}

获取状态

// name 为存储的localstorage的名字
function getState(name){
 return localStorage.getItem(name);
}

删除状态

// name 为删除的localstorage 对象的名字
function removeState(name){
 return localStorage.removeItem(name);
}

上面就是我们封装的localstorage本地存储状态的方法，如果我们是在vue或者是react和angular里面使用，我们的代码可以这么写。

先要导出封装好的方法

export function setState(name,value){
 return localStorage.setItem(name, value);
}

export function getState(name){
 return localStorage.removeItem(name);
}

export function removeState(name){
 return localStorage.removeItem(name);
}

获取导出的方法

import {setState,getState,removeState} from './localstorage'   // 获取路由下面的方法
setState(name,value) //存储对象
getState(name)  // 获取对象值
removeState(name)  // 删除对象

以上就是关于利用localstorage存储状态封装的基本方法，希望能够帮到你。