zoukankan      html  css  js  c++  java
  • jq点击按钮添加、删除localstory的数组

    $(function() { 
       var array = [].concat(JSON.parse(localStorage.getItem('history'))); //定义空数组
        //提交按钮点击事件 并刷新页面
        $('#submitBtn').click(function() {
                    array.push(plate); //添加到数组中
                    localStorage.setItem('history', JSON.stringify(array_unique(array))); //存 去重
                    if (array.length >= 7) {
                        array.shift()
                        localStorage.setItem('history', JSON.stringify(array)); //
                    } //限制存储个数 
                  location.reload(true); 
            })
      //去重
        function array_unique(arr) {
            return arr.filter(function(e, i) {
                return arr.indexOf(e) === i;
            })
        }
        //清空历史数据
        var ondata = JSON.parse(localStorage.getItem('history'))
        $(".clearHistory").click(function() {
                ondata.splice(0, ondata.length);
                localStorage.setItem('history', JSON.stringify(ondata)); //
                location.reload(true);
            })
         //html历史展示
        if (JSON.parse(localStorage.getItem('history')) == null) {
            console.log('暂无历史记录')
        } else {
            var data= JSON.parse(localStorage.getItem('history'))
            if (data[0] == null) {
                data.splice(jQuery.inArray(null, data), 1); //去除null
            }
            for (var i = 0; i < data.length; i++) {
                $('#history').append('<span id="delplate">' + data[i] + '</span>')
            }
            $("span").click(function() {
                console.log(data[$(this).index()])//获取jqhtml的span下标
            })
        }
    })
  • 相关阅读:
    CSS3学习-用CSS制作立体导航栏
    JS学习-事件响应小结-简单的计算器
    BOM学习-javascript计时器小结
    php 正则表达式
    zTree插件的应用
    css样式篇
    iso移动端input的bug解决(vue)
    html2canvas文字重叠(手机端)
    react中使用antd遇到的问题
    react开发初始配置和一些问题
  • 原文地址:https://www.cnblogs.com/minghan/p/13217333.html
Copyright © 2011-2022 走看看