CODEWITHSUNDEEP
jquerycsshtmllocal-storage
mattwilsn
mattwilsn

Reputation: 188

HTML5 localStorage as condition tool to change CSS

Hi

I have tried to solve this for some time I think I'm doing everything right but can't get it work. Any and all suggestions or ideas are welcome.

Im trying to change the display property from :none to :block on an external css style sheet dependent on if the value of a localstorage key is equal to null using jQuery.

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>

Any ideas?

I haven't found any other examples of this. If you know of any let me know

Upvotes: 1

Views: 696

Answers (1)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201568

If the code does not seem to work in your tests, then the probable reason is that you are testing it locally on a browser (e.g. IE 9) that does not support localStorage for local documents. (Sounds paradoxical, but the behavior is understandable because localStorage is defined per domain name, and for local documents there is no domain.)

So test it e.g. on Chrome (or newest version of Firefox), or upload the file onto a web server and test from there.

Upvotes: 1

Related Questions