2 willpan112 willpan112 于 2017.01.09 19:29 提问

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
JE_GE   2017.01.09 20:01

都是用键值对来存储啊

showbo
showbo   Ds   Rxr 2017.01.09 20:48

你不是弄好了?要搞什么东东?localStorage只能存储字符串,对象之类的要转为对应的json字符串后存储

showbo
showbo 回复willpan112: 你默认不就是红色的,后续的都从style这个key键获取值,就是红色的。。你自己先搞清楚逻辑
一年多之前 回复
willpan112
willpan112 只有点击数存进去了,样式好像没存成功
一年多之前 回复
CodeFarmerCXY
CodeFarmerCXY   2017.01.10 19:42
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
localStorage 存储对象
localStorage理论上只能存储字符串,存对象的话要把对象转换成字符串,取出来用之前也需要把字符串转换成对象。var obj = { name:'Jim', password: "123" }; var array = []; array.push(obj); array.push(obj); var str = JSON.stringify(array); //存入 l
localStorage 存储 数组
理论上是不可以的 但是万能的程序员总是能想到办法   把数组转化为 对象即可 //保存 var str = JSON.stringify(data.list); localStorage.setItem("options",str); //得到 var optionss=localStorage.getItem("options"); console.log(JS
客户端存储——localStorage和sessionStorage
在实现了Web存储的浏览器的window对象上,定义了两个属性:localStorage和sessionStorage,这两个对象都代表同一个持久化的关联数组对象Stroage对象。二者的根本区别在于作用域和保存期限的不同。这个后面再说,下面先说一下定义在二者之上的属性和方法。  第一段引用了JS权威指南的概念。。。那么,下面就想到哪说到哪,整点自己的大白话吧~由于二者用法都一样,所以就以loc
HTML5 Web存储之localStorage
HTML5 Web存储之localStorage背景以前,网页一般都是通过cookie在本地存储数据,但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。特点 没有时间限制 ## 浏览器支持 常用API 保存数据:localStorage.setItem(key,value); 读取数据:localStorage.getItem
关于localStorage存储json数据
有时候我们想要将一个JSON对象数据存储到localStorage中,但普通的存储肯定是不行的,因为localStorage只能存储字符串数据。//test1.html var obj = {"name":"zjp"}; localStorage.setItem('obj', obj); //这样在另一个页面中取出obj //test2.html var obj = localStorage.get
sessionstorage与localstorage存储对象
注:按F12之后,在Resources中可以查看Local Storage 与 Sesssion Storage中存储的数据。sessionstorage与localstorage的主要说明。相同点:在浏览器中存储数据,而且只能存储字符串类型的数据。 不同点:localStorage存储的数据是永久的,sessionStorage存储的数据是短暂的,一旦用户关闭窗口或标签页,sessionStor
localStorage 历史存储小工具
用来存储历史记录的小工具,比如你要存最近浏览的3条记录(最多3条该上限可以自己设置,最新的流量记录会被放置在第一条,相同的浏览记录位置会被更替到第一条)JavaScript 代码 var lsHistoryCls = (function () { // 构造器 /** * key localstorage中对应的key * uniqueKey 唯一标识,
HTML5本地存储-localStorage如何实现定时存储
HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储sessionStorage - 针对一个 session 的数据存储 然而,今天我要说的是“localStorage如何实现定时存储”,正常情况下,localStorage存入key-value后,是可以永久使用(前提:不清理cookie操作). 但是,项目中,我们或许需要实现
localStorage的存储数组对象的方式
localStorage存储数据的格式都是以字符串的形式来存储的, 存储数组对象的方式就是将数组对象转为字符串,在读取的时候再将字符串转成数组对象 操作的方式: 存:     var obj = {&quot;name&quot;:&quot;xiaoming&quot;,&quot;age&quot;:&quot;16&quot;}     localStorage.setItem(&quot;userInfo&quot;,JSON.stringify(obj)); 取:     var...
客户端存储-LocalStorage
LocalStorage是HTML5 提供的在客户端存储数据的方法。替代但不同于之前的globalStorage,规则作用范围事先已设定好,是同一个域名(子域无效),使用同一种协议,在同一个端口上。 目前主流的较新版浏览器除IE8以下的以外都支持localstorage。 localStorage 方法存储的数据没有时间限制,除非主动删除,否则永久有效。目前仅支持字符串数据的存取。 lo