使用浏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();

 

来源：oschina

链接：https://my.oschina.net/laobia/blog/3188611