html5之本地存储localStorage示例

全栈程序员-站长 • 2021年9月12日下午3:00 • 未分类 • 阅读 47

<!-- 
注意： 
index.html 文件中的IP指的是服务器的访问地址，请根据具体需求走。本案例只做参考。
返回的json格式，大家可通过本地.json文件模拟，具体格式如下：
{
    "cindex": 0,
    "max": 0,
    "min": 0,
    "p_id": 0,
    "paper_id": 0,
    "score": "",
    "scoreRule": "",
    "score_type": "",
    "title": "哈哈哈哈哈",
    "totalNum": 0,
    "type": 1,
    "unmber": ""
}
-->

index.html 文件

<!doctype html>
<html lang="en">
 <head>
  <title> html5本地缓存示例 </title>
  <meta charset="utf-8">
  <meta name="description" content="html5本地缓存示例">
 </head>

 <body>
 <div>
    <input type="text" id="jsonName"/>
    <input type="button" value="按存储名查询" onclick="findStorage()"/>
    <input type="button" value="按存储名删除" onclick="deleteStorage()"/>
    <div id="storageInfo">
    </div>
 </div>

 <p>
    1、针对客户端而言，localStorage 本地永久存储；sessionStorage 临时存储；<br/>
    2、localStorage 与 sessionStorage 存储大小5MB；注意不要存储敏感信息<br/>
    3、以ajax取得数据为例，将返回的json存储至localStorage中
 </p>
 <script type="text/javascript" src="js/lib/jquery-1.9.1.min.js"></script>
 <script>
    /*定义对象*/
    var questionIPort = "http://IP/yitaifront/normalcase/test?id=";

    function getElObj(elId){
    //取对象
        return document.getElementById(elId);
    }

    function isEmptyObj(data){
    //判空
        if(data == null || data == ""){
            return true;
        }else{
            return false;
        }
    }

    function saveStorage(saveName,data){
    //存数据
        if(isEmptyObj(data)){
            try{
                 console.log("数据保存失败");
                 window.localStorage.setItem(saveName,"");
            }catch(oException){
                 if(oException.name == 'QuotaExceededError'){
                    removeAllStorage(saveName, "");  
                 }
            }
        }else{
            var str = JSON.stringify(data);
            try{
                 window.localStorage.setItem(saveName,str);
                 console.log("整个数据已保存，取值name为"+saveName);
            }catch(oException){
                 if(oException.name == 'QuotaExceededError'){
                    removeAllStorage(saveName, str);  
                 }
            }
        }
    }

    function removeAllStorage(saveName, str){
    //清空所有
        console.log('超出本地存储限定范围！');
        //如果历史信息不重要了，可清空后再设置
        localStorage.clear();
        window.localStorage.setItem(saveName,str);
    }

    function removeStorageByCount(count){
        var countInt = count-0;
        console.log(window.localStorage);
        for(var i = 1; i <= countInt; i++){
            var storageKey = window.localStorage.key(i);
            console.log("第"+i+"个对象的key值为"+storageKey);
            window.localStorage.removeItem(storageKey);
        }
        console.log("超出本地存储限定范围！共删除"+i+"个对象");
    }

    function findStorage(){
    //查数据
        var targetObj = getElObj("jsonName").value;
        if(isEmptyObj(targetObj)){
            getElObj("storageInfo").innerHTML = "";
            return ;
        }else{
            var str = window.localStorage.getItem(targetObj);
            var data = JSON.parse(str);
            if(data != null && data != ""){
                getElObj("storageInfo").innerHTML = data.title;
                console.log(data.title);    
            }else{
                getElObj("storageInfo").innerHTML = "";
            }
        }
        console.log("查找......");
    }

    function deleteStorage(){
    //删数据
        var targetObj = getElObj("jsonName").value;
        if(isEmptyObj(targetObj)){
            return ;
        }else{
            window.localStorage.removeItem(targetObj);
            getElObj("storageInfo").innerHTML = "删除成功";
        }
        console.log("删除......");
    }

    function findQuestInfo(questionIPort, saveId){
    //接口调用
        $.ajax({
            url: questionIPort+saveId,
            dataType: "json",
            type: "get",
            beforeSend: function() {
    //请求前

            },
            success: function(response) {
    //请求成功
                if(response.code == 200){
                    saveStorage("questStorage"+saveId,response.data);
                }else{
                    saveStorage("questStorage"+saveId,"");
                }
            },
            complete: function() {
    //请求完成

            },
            error: function() {
    //请求出错
                saveStorage("questStorage"+saveId,"");
            }
        });
    }

    //查询保存数据 
    findQuestInfo(questionIPort, "118"); //单选题
    findQuestInfo(questionIPort, "181"); //多选题
    findQuestInfo(questionIPort, "135"); //填空题
    findQuestInfo(questionIPort, "182"); //主观题
    findQuestInfo(questionIPort, "166"); //数字记忆
    findQuestInfo(questionIPort, "167"); //词语记忆
    /*setTimeout(function(){
        removeStorageByCount(2);
    },3000);*/
    
 </script>
 </body>
</html>