jquery - HTML5 localStorage 作为改变 CSS 的条件工具

Question

你好

我已经尝试解决这个问题一段时间了，我认为我做的一切都是正确的，但无法让它发挥作用。欢迎提出任何建议或想法。

我试图在外部 css 样式表上将显示属性从 :none 更改为 :block，具体取决于使用 jQuery 的本地存储键的值是否等于 null。

CSS

 #cart-totals div.greysp1{
 display:none; 
 border-bottom: 1px solid #ccc;
 padding: 3px 0;margin: 0 0 0 20px;
 overflow: hidden;
 text-align:left;
 line-height:18px;
 color:#888;}

Javascript/jquery

if(localStorage.getItem('userScribble')==null){  

       $("#cart-totals div.greysp1").css("display","block");

       console.log("null");

    }else{
      console.log("Not null")

     }

HTML

 <div id="cart-totals" >
             <div class="cart-totals-content">
                          <div class="greysp1">
                            <div class="fL">Merchandise Subtotal:</div>
                            <div class="fR" id="MerchSubTotal"></div>
                          </div>

            </div>
    </div>

有什么想法吗？

我还没有找到这方面的任何其他例子。如果你知道任何让我知道

Answer 1

如果代码在您的测试中似乎不起作用，那么可能的原因是您在不支持本地文档的 localStorage 的浏览器(例如 IE 9)上对其进行本地测试。 (听起来很矛盾，但这种行为是可以理解的，因为 localStorage 是按域名定义的，而本地文档没有域。)

所以测试它，例如在 Chrome(或最新版本的 Firefox)上，或将文件上传到网络服务器并从那里进行测试。