First of all,i'm sorry for my english. I've created a simple wishlist system for an online store i'm building using jquery. But now i don't know how to store the items in local storage so the user can see them the next time he visit the store. I'm new to jquery and my coding abilities are very poor. Here's what i built:
<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>`
Is it possible to store the strings $product_str in local Storage and present them when the user comes back? How can this be done?
