将字符串存储在本地存储中

Store a string in local storage

本文关键字：存储 字符串      更新时间：2024-05-12

首先，我为我的英语感到抱歉。我已经为我正在使用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存储在本地存储中，并在用户返回时显示它们？如何做到这一点？

使用

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

以CCD_ 1为密钥并且CCD_ 2为值来设置值

使用，

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

获取密钥lastname 的值

localStorage对象存储的数据没有过期日期。

您可能想要查看cookie。

相关文章：