Question

我有一个JS脚本，它添加了（sessionStorage.setItem（））并删除了（sessionStorage.removeItem（））项目到sessionStorage。它的工作原理是添加一个项目将其添加到sessionStorage数组的末尾。它可以在Edge中按预期工作，但是在Chrome和Firefox中进行测试时，将一个项目添加到sessionStorage后，sessionStorage将按字母顺序重新排序，这意味着最后添加的项不会位于数组的末尾，这会破坏整个脚本。我该如何预防？这是将项目添加到sessionStorage的功能：

function addToCompareList(productName, productID, productHref) {
        var existsInCompare = false;
        for(var i = 0; i < sessionStorage.length; i++) {
            if(sessionStorage.key(i) == productName) {
                existsInCompare = true;
                break;
            }
        }
        if(!existsInCompare) {
            sessionStorage.setItem(productName, productID + ',' + productHref);
        }
        //item limit should be 4, so if storage exceeds limit, remove oldest item. This is the part that becomes faulty in some browsers
        if(sessionStorage.length > 4) {
            sessionStorage.removeItem(sessionStorage.key(0));
        }
    }

这是将项目添加到sessionStorage的函数的代码。

添加项目后，循环访问会话存储和console.log（）－在不同的浏览器中，每个项目的工作方式都不同：在Edge中，项目按照添加的顺序记录，在Chrome和Firefox中，它们得到按字母顺序记录，这意味着代码的注释部分无法按预期工作。

Answer 1

尽管存储具有length属性，并且您可以通过0获取索引length - 1的键，但它不是数组，并且没有定义订购。来自the spec：

key(n)方法必须返回列表中第 n 个键的名称。 键的顺序是用户代理定义的，但是只要键的数量不变，对象内的键顺序就必须一致。（因此，添加或删除键可能会更改键的顺序...

（我的重点）

如果要定义顺序，请通过JSON将数组存储在存储中，而不是存储单个条目：

在页面加载/从存储读取时，从存储获取阵列：

entries = JSON.parse(sessionStorage.getItem("entries") || "[]");

请注意，如果"entries"中没有sessionStorage，则getItem将返回null，因此我们为{{1}提供了默认值"[]"进行解析。（有很多方法可以给猫咪皮肤，这只是其中一种。）

要保存到存储中时：

JSON.parse

这样，条目按您定义的顺序（数组的顺序）。

重新编辑：sessionStorage.setItem("entries", JSON.stringify(entries));将是产品的对象数组。

如何阻止Chrome和Firefox按字母顺序对sessionStorage进行排序？

1 个答案: