使用浏localstorage缓存小说记录

使用浏localstorage缓存小说记录

另外它存储的值,只能是字符串,所以如果你想存入什么对象,或者数组,就不行了..不过可以把对象转为json字符串存储

所以一般用法就是先调用window.storage,把数据对象->字符串,字符串存值,使用setItem方法

var storage=window.localStorage;
var bookcase={"0":data};//定义好对象
//对象转为json字符串
bookcase_str=JSON.stringify(bookcase);
//localstorage存储键值
storage.setItem("bookcase",bookcase_str);

取值的话呢,也很方便啦,也就是getItem方法,然后把字符串换位对象,就完事儿了...

var storage=window.localStorage;
    if(storage.getItem("bookcase")){
        //获取值,转化为对象
        var bookcase_str=storage.getItem("bookcase");
        var bookcase_obj=JSON.parse(bookcase_str);
}

就是勒么的方便,下面就是自己代码中的一些实际操作.

function LastRead(){
    var bookname=$("#bookname").text();
    var bookname_url=$("#bookname").attr("href");

    var chaptername=$("#chaptername").text();
    var chaptername_url=window.location.href;

    var catename=$("#catename").text();
    var catename_url=$("#catename").attr("href");

    var author=$("#author").text();
    var author_url=$("#author").attr("href");

    //定义数据json obj
    var data={
        "bookname":bookname,
        "bookname_url":bookname_url,
        "chaptername":chaptername,
        "chaptername_url":chaptername_url,
        "catename":catename,
        "catename_url":catename_url,
        "author":author,
        "author_url":author_url
    };



    if(!window.localStorage){
        alert("浏览器支持localstorage");
        return false;
    }else{
        //定义本地存储对象
        var storage=window.localStorage;

        //删除
        //storage.removeItem("bookcase");

        //获取值,判断是否有值
        if(storage.getItem("bookcase")){
            console.log("has bookcase");

            //获取到数据json字符串
            var bookcase_str=storage.bookcase;

            //转化为对象
            var bookcase_obj=JSON.parse(bookcase_str);


            //console.log(bookcase_obj);return false;

            //循环判断当前数据的书名,章节是否有读过,读过并且章节名称不同,进行覆盖;没有读过,增加一条数据
            var has_read=0;//定义是否有阅读过
            var last_key="";//定义最后一个key,
            for (let key in bookcase_obj){
                last_key=key;//循环结束就可以获取到最后的一个key了.

                if(bookcase_obj[key]["bookname"]==data["bookname"]){
                    has_read=1;//定义已经读过了
                }

                //console.log(bookcase_obj[key]["chaptername"]);console.log(data["chaptername"]);

                if(bookcase_obj[key]["bookname"]==data["bookname"]&&bookcase_obj[key]["chaptername"]!==data["chaptername"]){
                    console.log("文章相同,名称不同,更新章节,和最后的url");
                    bookcase_obj[key]["chaptername"]=data["chaptername"];
                    bookcase_obj[key]["chaptername_url"]=data["chaptername_url"];
                }

            }

            //没有读过的情况下,新增一条数据
            if(has_read==0){
                var add_key=parseInt(last_key)+1;//最后一个键加一
                bookcase_obj[add_key]=data;
            }


            //此时,bookcase该加的也加了,该更新的也更新了..然后进行保存
            console.log("update bookcase data");
            console.log(bookcase_obj);

            //对象转为json字符串
            bookcase_json_str=JSON.stringify(bookcase_obj);
            //localstorage存储键值
            storage.setItem("bookcase",bookcase_json_str);

            //console.log(bookcase_json_str);

            return false;
        }else{
            console.log("no bookcase data");


            var bookcase={"0":data};//定义好对象
            //对象转为json字符串
            bookcase_str=JSON.stringify(bookcase);
            //localstorage存储键值
            storage.setItem("bookcase",bookcase_str);

            console.log(bookcase);

            return false;
        }



        var json=storage.getItem("bookcase");
        var jsonObj=JSON.parse(json);

        console.log(jsonObj);

    }




}

LastRead();

function showbook(){

    //$("#bookcase_list").html("");//清空dom的html
    var bookhtml="";

    var storage=window.localStorage;
    if(storage.getItem("bookcase")){
        //获取值,转化为对象
        var bookcase_str=storage.getItem("bookcase");
        var bookcase_obj=JSON.parse(bookcase_str);

        //对象循环
        for (let key in bookcase_obj){
            //追加html
            bookhtml+="<li>";
            bookhtml+="<a class="catename" href=""+bookcase_obj[key]["catename_url"]+"">"+bookcase_obj[key]["catename"]+"</a>";
            bookhtml+="<a class="bookname" href=""+bookcase_obj[key]["bookname_url"]+"">"+bookcase_obj[key]["bookname"]+"</a>";
            bookhtml+="<a class="chaptername" href=""+bookcase_obj[key]["chaptername_url"]+"">"+bookcase_obj[key]["chaptername"]+"</a>";
            bookhtml+="<a class="author" href=""+bookcase_obj[key]["author_url"]+"">"+bookcase_obj[key]["author"]+"</a>";
            bookhtml+="</li>"
        }



        try {


        }catch (e) {
            bookhtml="<li><p>暂无阅读记录哦</p></li>";
        }

        //追加html
        $("#bookcase_list").append(bookhtml);

    }



}


showbook();