0
まず、英語には申し訳ありません。私はjqueryを使ってビルドしているオンラインストア用の簡単なウィッシュリストシステムを作成しました。しかし、今はローカルストレージにアイテムを保存する方法がわからないので、ユーザーは次回店を訪れたときにそれらを見ることができます。私は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を保存し、ユーザーが戻ってきたときにそれらを提示することは可能ですか？これはどうすればできますか？
「[HTML5 localStorageのオブジェクトを格納する]」（http://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage）の可能な複製 – xkcd149