HTML5 localStorage 作为更改 CSS 的条件工具

Question

嗨

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

我试图在外部 css 样式表上将显示属性从 :none 更改为 :block ，这取决于使用 jQuery 的 localstorage 键的值是否等于 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）上，或将文件上传到网络服务器并从那里进行测试。