在前端如何使用jquery.storageapi.min.js缓存数据

最新推荐文章于 2022-07-28 10:12:06 发布

原创最新推荐文章于 2022-07-28 10:12:06 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

Java开发专栏收录该内容

24 篇文章

订阅专栏

本文介绍了一种在多页面跳转中利用前端缓存插件（jquery.storageapi.min.js）存储和传递数据的方法，以实现人员选择功能。通过缓存数据，解决了重定向时数据无法直接传递的问题。

正常情况下，页面的跳转我们都是喜欢通过Controller跳转（请求转发），然后让Model、ModelAndView（SpringMVC框架）、request等将数据带到页面去。但是如果项目中需要是直接跳转呢（重定向）。那么，数据只能跟着URL后面带着过去了，那如果数据是一个表单的数据呢，那URL是非常的长而且不美观的，加上GET提交的数据是有限制的，因为浏览器对URL的长度有限制，那么数据跟着URL直接带过去就不现实了，但是我们可以用到前端的缓存呀，使用的缓存插件就是jquery.storageapi.min.js。

下面我将讲一下场景和我是怎么使用的。

场景：

点击机构，进入机构的用户列表，可以进行多选
点击已选，可以进入查看已选人员，可以进行取消，或在已选里面再选
点击确定，返回人员数据（人员选择页面没有确定，自己添加）
因为有多个页面跳转，选择人员的数据先存在页面缓存中，选中和取消选择都需要对缓存数据进行操作
缓存使用jquery.storageapi.min.js
需要可以回显（其实回显就是用到缓存，不然实现不了）
用户选择页面其实和已选择弹出的页面是一样的，展示用户。只是用户选择页面是根据点击的机构id查询出来用户列表。而已选择页面是列出已选择的用户列表，但是相同的是两个页面都可以多选，然后点击确定提交数据返回到组织机构选择页面。

导入js：jquery-1.8.2.min.js和jquery.storageapi.min.js

需要注意的是，需要新建一个使用缓存的js（userSelect.js），每个页面都需要引入这个js，而且还需要引用jquery-1.8.2.min.js和jquery.storageapi.min.js。因为公用一个js，storage对象才是全局的，缓存才能共享。

下面看一下userSelect.js的代码。

/**
* 使用此js的方法记得页面一定得引入jquery和jquery.storageapi.min.js
* Howinfun
* 2018-07-18
*/

/**
* 人员选择页面（组织机构页面跳转到人员选择页面）
*checkData：这个是缓存的人员数据
* departId：点击的组织机构id
* departName：点击的组织机构name
*/
function userSelect(checkData,departId,departName){

    var storage = getStorage();
    var checkKey = newGuid();
    storage.set(checkKey, checkData);
    //这个跳转到人员选择页面
    window.location.href = "mobile.do?        webcontent/index&page=user_select&checkKey="+checkKey+"&dId="+departId+"&departName="+departName;

}

/**
* 组织选择页面（人员选择页面（或已选人员页面）跳转到组织机构页面）
* checkData：这个是缓存的人员数据
*/
function orgSelect(checkData){

    var storage = getStorage();
    var checkKey = newGuid();
    storage.set(checkKey, checkData);
    //这个跳转到组织选择页面
    window.location.href = "mobile.do?webcontent/index&page=org_select&checkKey="+checkKey;

}

/**
* 已选人员页面（组织机构页面跳转到已选人员页面）
* checkData：这个是缓存的人员数据
*/
function checkUser(checkData){

    var storage = getStorage();
    var checkKey = newGuid();
    storage.set(checkKey, checkData);
    //这个跳转到已选人员页面
    window.location.href = "mobile.do?webcontent/index&page=checkUser&checkKey="+checkKey;

}

/**
* 缓存对象（在此js中是全局的）
*/
var storage = null;
function getStorage(){
    if(storage == null){
        storage = $.localStorage;
        if (!storage)
            storage = $.cookieStorage;
    }
    return storage;
}

/**
* 获取guid作为缓存的key值
*/
function newGuid() {
    var guid = "";
    for (var i = 1; i <= 32; i++) {
        var n = Math.floor(Math.random() * 16.0).toString(16);
        guid += n;
        if ((i == 8) || (i == 12) || (i == 16) || (i == 20)) guid += "-";
    }
    return guid;
}

/**
* 从缓存获取数据，并删除数据
*/
function getAndRemoveStorageVal(key){
    var storage = getStorage();
    val = storage.get(key);
    storage.remove(key);
    return val;
}