將字符串存儲在本地存儲中

首先，我對我的英語感到抱歉。我爲使用jquery構建的在線商店創建了一個簡單的wishlist系統。但是現在我不知道如何將這些物品存儲在本地存儲中，以便用戶在下次訪問商店時可以看到它們。我是jquery的新手，我的編碼能力非常差。這是我建：將字符串存儲在本地存儲中

<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 

<style> 

body{background:#333;font-family:"Open sans", sans-serif;font-size:100%;text-align:center;font-size:62.5%;} 
button{padding:5px 20px;border-radius:4px;margin:10px auto;border:0;background-color:#fff;font-weight:600;cursor:pointer;color:#c12267;} 
#wish_list{margin:100px auto;min-height:300px;width:100%;background:#fff;} 
#wish_list .wish_list_heading{margin:0;color:#fff;height:30px;background-color:#c12267;overflow:hidden;padding:5px;font-weight:600;} 
#wish_list_item{width:100%;text-align:center;border-spacing:0px;border-collapse:separate;} 
.wishlist-item{position:relative;clear:both;width:100%;margin:2px 0;padding:0;float:left;display:block;height:80px;border-bottom:1px solid #EEE;} 
.w-premove{position:absolute;width:20px;display:block;height:20px;top:30px;left:0;text-align:center;font-weight:900;font-size:140%;line-height:20px;color:red;} 
    .w-pimage{top:0;left:25px;width:75px;height:25px;display:block;position:absolute;} 
.w-pimage img{width:100%;} 
.w-pname{top:5px;left:100px;width:calc(100% - 100px);width:-o-calc(100% - 100px);width:-webkit-calc(100% - 100px);width:-moz-calc(100% - 100px);height:40px;padding:0;text-align:left;font-size:140%;font-weight:600;line-height:1em;position:absolute;} 
.w-pname a{text-decoration:none;color:#333;} 
.w-price{top:50px;left:100px;height:20px;width:75px;color:#c12267;font-weight:600;font-size:150%;text-align:center;line-height:20px;display:block;position:absolute;} 

</style> 

</head> 

<body> 

<button class='wishlist' product_name='Product 1' product_id='product1' product_link="PRODUCT PAGE URL" product_price='90' product_image="IMAGE LINK">DESEJAR</button> 

    <div id='wish_list'> 
     <p class="wish_list_heading"> 
      <span id='listitem'>0</span> 
      <span id='p_label'>Product</span> 
     </p> 
     <table id='wish_list_item' border='0'></table> 
    </div> 

<script type='text/javascript'> 

var wish_list = new Array(); 
jQuery(function(){ 
    jQuery(".wishlist").on("click",function(){ 
     $data = ""; 
     $product_id = jQuery(this).attr("product_id"); 
     $product_name = jQuery(this).attr("product_name"); 
     $prduct_price = jQuery(this).attr("product_price"); 
     $product_link = jQuery(this).attr("product_link"); 
     $product_image = jQuery(this).attr("product_image"); 
     if(jQuery.inArray($product_id,wish_list)==-1){ 
      $product_str = "<tr class='wishlist-item' id='list_id_"+$product_id+"'><td class='w-premove' wpid='"+$product_id+"'>x</td><td class='w-pimage'><img src='"+$product_image+"' /></td><td class='w-pname'><a href='"+$product_link+"'>"+$product_name+"</a></td><td class='w-price'>"+$prduct_price+"€</td></tr>"; 
      jQuery("#wish_list_item").append($product_str); 
      wish_list.push($product_id); 
     } 

     count_items_in_wishlist_update(); 
    }); 
    jQuery("#wish_list_item").on("click",".w-premove",function(){ 
     $product_id = jQuery(this).attr("wpid"); 
     jQuery("#list_id_"+$product_id).remove(); 
     wish_list = jQuery.grep(wish_list, function(n, i) { 
      return n != $product_id; 
     }); 
     count_items_in_wishlist_update(); 
    }); 
}); 
function count_items_in_wishlist_update(){ 
    jQuery("#listitem").html(wish_list.length); 
    if(wish_list.length>1){ 
     jQuery("#p_label").html("Products"); 
     }else{ 
     jQuery("#p_label").html("Product"); 
    } 
} 

</script> 

</body> 
</html>`

是否有可能將字符串$ product_str存儲在本地存儲並在用戶回來時顯示它們？如何才能做到這一點？

來源

2016-04-12 Tolki

[在HTML5 localStorage中存儲對象]的可能重複（http://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage） – xkcd149

使用

localStorage.setItem("lastname", "Smith");

設定值與lastname關鍵和"Smith"作爲價值

使用，

var result = localStorage.getItem("lastname");

獲得的關鍵lastname

的localStorage的值對象存儲沒有expirat的數據離子日期。

來源

2016-04-12 18:26:50

你可能想看看cookies。

來源

2016-04-12 18:10:34

將字符串存儲在本地存儲中

回答

相關問題