localstorage如何存储样式

发布于
2017-01-09

比如我点击后样式改变，如何将改变的样式存到localstorage中去，并存下点击的次数？

<!doctype html>
<html lang="en">

    <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;
            }
        </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>
        <script type="text/javascript">            
            $(".box").click(function() {
                $(this).css('background', 'red');
            });
        </script>
    </body>

</html>

javascript html css

阅读 5.4k

4 个回答

得票最新

499311496

2.4k148

发布于
2017-01-09

window.localStorage.setItem('style', JSON.stringify({background: 'red', count: 1}))

vsion

5.1k71839

发布于
2017-01-09

更新于
2017-01-09

localstorage使用方法? 不在这里多说了
直接看文档: https://developer.mozilla.org...

点击的时候直接:
localStorage.setItem("bgColor", "xxx");
下次先document.ready的时候读取 localStorage.getItem("bgColor")是否有值, 再去改变页面样式.

u3u

5.5k31224

发布于
2017-01-09

更新于
2017-01-09

可以把一个样式 json 字符串存进去

$('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)) // 覆盖存储
})