uniapp 跨页面传递数据解决方案

发布于 2023-12-24  514 次阅读


内容纲要

在uniapp跨页面传数据,主要通过sessionStoragelocalStorage实现。

实际上这两种方法都是基于window对象的标准api。

此前我曾经尝试使用cookie储存数据:

Vue.prototype.addCookie = function (name,value){

    if(Boolean(document.cookie)==false || document.cookie=="" || document.cookie==null || document.cookie == 'null'){
        let data={};
        this.$set(data,name,value);
        let d = new Date();
        d.setTime(d.getTime()+(1*24*60*60*1000));
        let expires = "expires="+d.toGMTString();
        document.cookie=JSON.stringify(data)+";"+expires;
        return true;
    }
    let data=JSON.parse(document.cookie.split(";")[0]);
    this.$set(data,name,value);
    let d = new Date();
    d.setTime(d.getTime()+(1*24*60*60*1000));
    let expires = "expires="+d.toGMTString();
    document.cookie=JSON.stringify(data)+";"+expires;
}

但是使用Cookie在页面间传递数据是一种低级且不明智的选择,因为浏览器对客户端cookie的支持性不是很强,通过cookie来储存数据需要封装大量复杂的代码,且不便于操作。

当然在很多方面cookie的优势很大,但是就我现在做的业务而言使用更加良好的windowAPI是更好的选择。

概述

Web Storage API 提供了存储机制,通过该机制,浏览器可以安全地存储键值对,比使用 cookie 更加直观。

存储对象是简单的键值存储,类似于对象,但是它们在页面加载时保持完整。键和值始终是字符串(请注意,与对象一样,整数键将自动转换为字符串)。

所以注意,如果需要在Storage中储存复合类型的数据,必须将其转为JSON字符串来储存(由于键值对都要是字符串)

localStorage与localStorage都是window下的对象(更确切的说,在支持的浏览器中 Window 对象实现了 WindowLocalStorage 和 WindowSessionStorage 对象并挂在其 localStorage 和 sessionStorage 属性下),二者的功能相同,都是为每一个给定的源(given origin)维持一个独立的存储区域。

在这个储存区域没有被释放之前,你都可以随时访问通过这两个对象来获得你所储存的键值对。

关于释放,则是localStorage与sessionStorage最直接的不同,localStorage将资源一直储存在浏览器内存区域中,除非用户手动将他清除,否则他会一直存在。而sessionStorage则只存在于当前会话,一旦窗口的生命周期结束了(退出浏览器和关闭窗口),sessionStorage都会被清除。

无论是localStorage还是sessionStorage他们所返回的都是一个Storage对象,但是他们都是独立存在的,相互不受影响。

可用性

支持 localStorage 的浏览器将在窗口对象上具有一个名为 localStorage 的属性。但是,仅断言该属性存在可能会引发异常。如果 localStorage 确实存在,则仍然不能保证 localStorage 实际可用,因为各种浏览器都提供了禁用 localStorage 的设置。因此,浏览器可能支持 localStorage,但不适用于页面上的脚本。

例如,私有浏览模式下的 Safari 浏览器为我们提供了一个空的 l ocalStorage 对象,其配额为零,实际上使它无法使用。相反,我们可能会收到合法的 QuotaExceededError,这意味着我们已经用完了所有可用的存储空间,但实际上存储空间可用。我们的功能检测应考虑这些情况。

检测Storage是否受支持:

function storageAvailable(type) {
  var storage;
  try {
    storage = window[type];
    var x = "__storage_test__";
    storage.setItem(x, x);
    storage.removeItem(x);
    return true;
  } catch (e) {
    return e;
  }
}

以上示例通过try尝试实例化给定的storage类型,如果能够成功执行添加键值对和删除键值对则返回true,否则返回不能使用storage的原因。

使用Storage添加和更新键值对

使用storage将键值对写入本地储存:

localStorage.setItem(key,value);
sessionStorage.setItem(key,value);

注意key和value都应当是字符串类型的数据。

例如在不同的页面传递数据,用户在A页面输入手机号和验证码,在B页面需要得到A页面输入的手机号和验证码,使用Storage来储存是非常良好的方法。

由于键值对需要是字符串的形式,所以要将手机号和验证码保存为一个对象并且通过JSON的格式储存:

localStorage.setItem("data",JSON.stringify({phone:13333333333,code:999999}));
sessionStorage.setItem("data",JSON.stringify({phone:13333333333,code:999999}));

localStorage和sessionStorage择一即可。

如果添加的键已经存在则会更新他的值。

取得键值对数据

在B页面取得数据:

let data=window.sessionStorage.getItem("data");
data=JSON.parse(data);

取得数据使用getItem()方法,参数为键名,返回对应的值。

删除键值对数据

通过removeItem()来删除键值对,参数为要删除的键名。

或者通过clear来清楚当前域名下的所有键值对数据,这个方法不需要参数,而是将Storage储存的所有键值对都删除。

例如:

sessionStorage.removeItem("username");   //删除键为username的数据
sessionStorage.clear();    //清除所有数据

取出键名

通过key()方法可以返回指定位置的键名,参数为索引位置。

如果对应位置不存在一个键值对则返回null,否则返回此位置下的键名。

同时你还可以通过Storage.length来取得当前storage的一共储存了多少键值对。

所以可以封装一一个列出所有储存的键的方法:

function getAllKeys(type){
    let storage=window[type];
    let len=storage.length;
    let keys=new Array();
    for(let i=0;i<len;i++){
        keys.push(storage.key(i));
    }
    return keys;
}

小杜的个人图床