Question

我想在cart中使用web storage来google chrome。我的网页index.html和cart.html太多了。我可以设置index.html的值并从同一页面获取。但是当我移动到cart.html时，存储的值无法访问那里。为什么会这样？我没有得到很多这方面的教程。请帮忙。

我的网页

的index.html

<html>
 <head>
    <title>Cart test</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    sessionStorage.setItem( "total", 10 );
    var has_cart = 0;
    if(sessionStorage.length > 1){
        has_cart = sessionStorage.length -1;
    }
    console.log(sessionStorage);
    $(window).ready(function(){
        $('#cart-size').val(has_cart);
    }); 
    </script>
    <script type="text/javascript" src="custom.js"></script>
 </head>
 <body>
    <button type="button" data-id="1" product="1" merchant="1" class="add-cart">Add 1</button>
    <button type="button" data-id="1" product="2" merchant="1" class="add-cart">Add 2</button>
    <button type="button" data-id="1" product="3" merchant="2" class="add-cart">Add 3</button>
    <br /><br />
    <input type="text" size="3" id="cart-size" />
    <br />
    <br />
    <a href="cart.html">Go to cart</a>
 </body>
</html>

cart.html

<html>
    <head>    
        <title>Cart</title>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
        var has_cart = 0;
        if(sessionStorage.length > 1){
            has_cart = sessionStorage.length -1 ;
        }
        console.log(sessionStorage);
        $(window).ready(function(){
            $('#cart-size').val(has_cart);
        }); 
        </script>
        <script type="text/javascript" src="custom.js"></script>
    </head>
    <body>
        <input type="text" size="3" id="cart-size" />
        <br />
        <br />
    </body>
</html>

custom.js

$(function(){
    $('.add-cart').on('click', function(e){
        e.preventDefault();
        var elm = $(this);
        var id = elm.attr('data-id');
        var product = elm.attr('product');
        var merchant = elm.attr('merchant');
        cart = {
            item: product,
            id: id,
            mer: merchant
        };
        var jsonStr = JSON.stringify( cart );
        var cartValue = sessionStorage.getItem( product+id+merchant );
        var cartObj = JSON.parse( cartValue );
        if(cartObj){
            alert('Product already added to cart');
        }
        else
        {
            $('#cart-size').val(parseInt($('#cart-size').val())+1);
            sessionStorage.setItem( product+id+merchant, jsonStr );
        }
    });
});

由于网络上没有太多有用的文档，我无法弄清楚这个问题。有人请帮忙。提前谢谢大家

Answer 1

sessionStorage的作用类似于全局变量。当您更改页面或关闭标签时，它会失去其范围。

改为使用localStorage。

Read more details here.

Answer 2

正如Hiral sessionStorage所说，在页面被更改或标签关闭时会失去其范围。你有一个更好的方法来使用JSTORAGE这是一个简单而更好的方法来存储数据并使用其密钥检索它们

存储数据：

设置（键，值[，选项]）

$.jStorage.set(key, value, options);

撤回数据：

获取（键[，默认]）

value = $.jStorage.get(key)
value = $.jStorage.get(key, "default value")

删除数据：

<强> DELETEKEY（键）

$.jStorage.deleteKey(key)

你只需要添加cdn并使用jquery和json来存储和检索数据。简单来说，它是一个本地数据库，在所有主流浏览器中都支持 - Internet Explorer 6 +，Firefox 2 +，Safari 4 +，Chrome 4 +，Opera 10.50 +

如需进一步参考，请查看HERE

浏览器'sessionStorage'没有进入另一个页面

2 个答案: