移动端localstorage本地存储的使用

<script>
    var quill = new Quill('#editor-container', {
        modules: {
            formula: true,
            syntax: true,
            toolbar: '#toolbar-container'
        },
        placeholder: 'Compose an epic...',
        theme: 'snow'
    });

    $(function () {

        var timer = null;

        //  简单节流器 每隔三秒储存数据
        function throttle() {
            if (timer == null) {
                timer = setTimeout(saveLocal, 3000);
            } else {
                return;
            }
        }

        $(".ql-editor").on("keydown", function () {
            if ($('.title input').val() != '') {
                throttle();
            } else {
                alert("请先输入标题");
            }

        });

        var title = null;

        $('.title input').on({
            'focus': function () {
                title = $(this).val();
            }, 'blur': function () {
                var new_title = $(this).val();
                if ($.trim(new_title) != $.trim(title) && $.trim(title) != '') {
                    Titlechange(title, new_title);
                }
            }
        });


        //获取索引
        geturl();

        //当标题改变时 本地储存同步改变
        function Titlechange(obj1, obj2) {

            var data = JSON.parse(window.localStorage.getItem('biji'));
            $(data).each(function (i, data) {
                if (data[0].title == obj1) {
                    data[0].title = obj2;
                    return;
                }
            })
            window.localStorage.setItem("biji", JSON.stringify(data));

        }

        //实时记录 笔记内容
        function saveLocal() {
            clearTimeout(timer);
            timer = null;
            var $title = $('[name="title"]').val();
            var $html = $(".ql-editor").html();
            var content = [{title: $title}, {text: $html}];


            if (window.localStorage.getItem("biji") == null) {
                window.localStorage.setItem("biji", JSON.stringify(new Array()));
            } else {

                var data = JSON.parse(window.localStorage.getItem("biji"));
                var flag = false;

                if (data.length != 0) {
                    $(data).each(function (i, data) {
                        if (data[0].title == $title) {
                            data[1].text = $html;
                            flag = true;
                            return;
                        }
                    })
                    window.localStorage.setItem("biji", JSON.stringify(data));
                }

                if (!flag) {
                    data.push(content);
                    window.localStorage.setItem("biji", JSON.stringify(data));
                }

            }
        }


    });


    //获取索引
    function geturl() {
        var index = parseInt(location.href.split("?index=")[1]);
        if (index != null) {
            var data = JSON.parse(window.localStorage.getItem("biji"));
            $('[name="title"]').val(data[index][0].title);
            console.log(data[index][1].text);
            $(".ql-editor").html(data[index][1].text);
        } else {
            return;
        }
    }


</script>

基于localstorage写的小项目

运行
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

window.sessionStorage

在这里插入图片描述

window.localstorage

在这里插入图片描述

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值