首页 > 其他分享 >移动端localstorage本地存储的使用

移动端localstorage本地存储的使用

时间:2022-11-13 16:03:07浏览次数:50  
标签:function 存储 title biji window localstorage 本地 var data

<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>

 

 

window.sessionStorage

 

 

window.localstorage

 

 来自:https://blog.csdn.net/liangmaxmin/article/details/107673161

 

标签:function,存储,title,biji,window,localstorage,本地,var,data
From: https://www.cnblogs.com/djd66/p/16886102.html

相关文章

  • MySQL-存储引擎-索引
    事务方式1:set@@autocommit=0-- 将事务提交方式设置为手动方式2:starttransaction-- 开启事务 事务四大特性ACID:A:原子性(Atomicity)事务是不可分割的最小操作单......
  • 如何将蜻蜓FM的音频资料提取到本地,一个小工具让你三步就轻松搞定
    蜻蜓FM里面有很多大咖讲的干货内容,为此我还购买了VIP会员,可是最近用起来并不尽兴,原因是我想下载太多东西了,手机里面存不下,电脑上登陆客户端下载的东西却在其他播放工具上打......
  • Mysql8.0本地Datagrip失败--时区
    新版的Mysql中的时区默认设置与本地时区之间是不同的,因此会报错。由此,解决方法即为修改时区设置即可 ?serverTimezone=UTC ......
  • Redis几种数据结构的存储方式
    一、使用stringRedisTemplate向redis中存储List数据取出privateStringRedisTemplatestringRedisTemplate;这里的RedisConstants.CACHE_SHOP_TYPE是"cache:shop-ty......
  • 【单片机/嵌入式】【梁山派】学习日志13:直接存储器访问DMA
    一、DMA原理介绍1.1DMA基础知识1.1.1数据传输方式一般情况下实现存储器和外设之间的数据传输,有三种常用的方法:轮询法(polling),中断法(interrupt)以及DMA。轮询法(polling):......
  • mysql 优化分表 存储引擎
    分表--创建key分表createtableuser1(uidintauto_incrementprimarykey,unamevarchar(20)notnull)engine=myisamdefaultcharset=utf8partitionbykey(ui......
  • Git获取本地仓库
    要使用Git对代码进行版本控制,首先要获得本地仓库。(1)在电脑任意位置创建一个空目录(文件夹),作文本地Git仓库(2)进入到这个目录,右键打开Gitbash窗口(3)执行命令gitinit目的:初......
  • 6大数据库,挖掘7种业务场景的存储更优解无密还似旧时游上苑
    download:6大数据库,挖掘7种业务场景的存储更优解无密还似旧时游上苑操作系统和应用程序破绽评价什么是破绽评价破绽管理的目的是一直控制IT根底架构风险。破绽评价过......
  • 秋天的第一个存储过程
    问题描述:创建性能监测表。从数据库中找出num_rows<=3,或者统计信息被锁定的表;并且把这些表count(*)的历史峰值,记录下来。使用定时任务加上存储过程来实现这个方式,先筛选符......
  • 找到一款喜马拉雅听书内容下载到电脑本地的工具!
    就喜欢看小说,边看小说边刷资讯,但是手机经常就音频被占用,断断续续的很烦。 后来干脆把喜马拉雅听书内容下载到电脑本地,直接电脑播放,还永久保存,想看的时候用电脑就行,并且......