willpan112 2017-01-09 11:29 采纳率: 0%
浏览 1048

localstorage如何存储样式

<!doctype html>

<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="http://libs.baidu.com/jquery/1.7.0/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background: #333;
            color: #fff;
            margin: 15px auto;
        }
        .one{
            display: none;
        }
    </style>
</head>

<body>
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box one">6</div>
    <script type="text/javascript">
        $('.box').on('click', ev => {
            let css = localStorage.getItem('style'); // 读取存储
            css = css ? JSON.parse(css) : {
                background: 'red',
                click: 0
            }
            css.click++; // 记录点击次数
            $(ev.currentTarget).css(css); // 设置样式
            localStorage.setItem('style', JSON.stringify(css)); // 覆盖存储
            if(css.click == "5") {
                $(".one").css('display','block');
            };
        })
    </script>
</body>

  • 写回答

3条回答 默认 最新

  • JE_GE 2017-01-09 12:01
    关注

    都是用键值对来存储啊

    评论

报告相同问题?

悬赏问题

  • ¥15 seatunnel-web使用SQL组件时候后台报错,无法找到表格
  • ¥15 fpga自动售货机数码管(相关搜索:数字时钟)
  • ¥15 用前端向数据库插入数据,通过debug发现数据能走到后端,但是放行之后就会提示错误
  • ¥30 3天&7天&&15天&销量如何统计同一行
  • ¥30 帮我写一段可以读取LD2450数据并计算距离的Arduino代码
  • ¥15 飞机曲面部件如机翼,壁板等具体的孔位模型
  • ¥15 vs2019中数据导出问题
  • ¥20 云服务Linux系统TCP-MSS值修改?
  • ¥20 关于#单片机#的问题:项目:使用模拟iic与ov2640通讯环境:F407问题:读取的ID号总是0xff,自己调了调发现在读从机数据时,SDA线上并未有信号变化(语言-c语言)
  • ¥20 怎么在stm32门禁成品上增加查询记录功能