uniapp没有localstorage可使用uni.setStorage

1,410 阅读2分钟

1: localStorage.getItem

WEB应用的快速发展,本地存储一些数据也成为一种重要的需求,实现的方案也有很多,最普通的就是cookie了,大家也经常都用,但是cookie的缺点是显而易见的,其他的方案比如:IE6以上的userData,Firefox下面的globalStorage,以及Flash的本地存储,除了Flash之外,其他的几个都有一些兼容性的问题。

2: localStorage的方法

localStorage.getItem(key): 获取指定key本地存储的值; // 获取指定key 本地存储数据的值。

localStorage.setItem(key,value):将value存储到key字段; // 获取指定value 存储到key 字段

localStorage.removeItem(key): 删除指定key本地存储的值; // 删除指定key 本地存储的值

created() {
    localStorage.getItem("loginName");  /// 获取本地value 值
    api
      .getUserInfor(
        {},
        {
          url: "/api/User/name/" + xxxxxxx,
        }
      )
      .then((res) => {
        this.resultObject = res;
        this.model.loginname = this.resultObject.loginname;
      });
  },

uni.getStorage

不过在uniapp中,这样使用会报错,这时候我们就需要用到uni.getStorage

uni-app的本地储存 类似h5的localstorage,同步存储和读取

设置存储内容

参数为参数名,参数值

uni.setStorageSync('name',"浮游");

也可以这样写 uni.setStorageSync('name',this.name);

输出存储内容

仅仅使用参数名即可获取

console.log(uni.getStorageSync('name'))

删除存储内容

uni.removeStorageSync('name')

存储不到接口数据可以尝试使用异步

1、将数据存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容,这是一个异步接口

uni.setStorage({
    key: "token",
    data: res.data.accessToken
});

2、从本地缓存中异步获取指定 key 对应的内容。

uni.getStorage({
    key: 'token',
    success: function (res) {
        console.log(res.data);
        let token = res.data;
    }
});
//项目中我是这样用的
//封装uni.request()
function requestApi(url, params = {}, method = 'get') {
	var token = uni.getStorageSync('token') || '';
	return new Promise((resolve, reject) => {
		uni.request({
			url: url,
			data: params,
			method: method,
			header: {
				"content-type": "application/json",
				"Authorization": token
			},
			success: (res) => {
				resolve(res.data)
			},
			fail: (err) => {
				reject(err)
			}
		})
	})
}
//暴露模块
module.exports = {
	requestApi
}

3、从本地缓存中异步移除指定 key。

uni.removeStorage({key: 'token'});

4、清理本地所有数据缓存。

uni.clearStorage();