为什么对于不太长的字符串会出现 QUOTA_BYTES_PER_ITEM 错误？

Question

我的扩展中有一个代表播放列表的对象，我需要将它保存到 chrome.storage.sync。

我知道 4096 QUOTA_BYTES_PER_ITEM，这意味着 key.length + JSON.stringify(val).length 必须小于 4096。但我的对象是 3956 （val stringify length + ket length），我仍然无法将其写入存储。我做错了什么？

我的对象 JSON 字符串化结果：

{"playlist":{"state":{"tracks":[{"artist":"In Flames","title":"Delight And Angers (Instrumental)"},{"artist":"Marilyn Manson","title":"Coma Black"},{"artist":"Red Hot Chili Peppers","title":"Can't Stop"},{"artist":"Jack Johnson","title":"Better Together (Hawaiian Version)"},{"artist":"Joel Nielsen","title":"Surface Tension 2"},{"artist":"Katatonia","title":"Deliberation"},{"artist":"Rev Theory","title":"Hell Yeah"},{"artist":"Die drei Friseure ","title":"Parikmaher"},{"artist":"In Flames","title":"Drenched in Fear"},{"artist":"In Flames","title":"A New Dawn"},{"artist":"Before The Dawn","title":"The First Snow/Winter Within"},{"artist":"Corey Taylor & James Root","title":"Zzyzx Road"},{"artist":"In Flames","title":"Ropes"},{"artist":"In Flames","title":"Come Clarity"},{"artist":"Jack Johnson","title":"Better Together"},{"artist":"In Flames","title":"Crawl Through Knives"},{"artist":"Ленинград","title":"День Рождения.а я вот день рожденье не буду справлять!"},{"artist":"Ellen McLain","title":"Still Alive"},{"artist":"Richard Cheese","title":"People Equals Shit "},{"artist":"Papa Roach","title":"Last Resort"},{"artist":"Killswitch Engage","title":"The End of Heartache"},{"artist":"Sonic Syndicate","title":"Denied"},{"artist":"Trivium","title":"Pull Harder On The Strings Of Your Martyr"},{"artist":"Bon Jovi","title":"Last Man Standing"},{"artist":"Jelonek","title":"Beast"},{"artist":"Gorillaz","title":"Feel Good Inc"},{"artist":"Five Finger Death Punch","title":"Falling In Hate"},{"artist":"Metallica","title":"The Memory Remains (Live)"},{"artist":"Richard Z. Kruspe","title":"Wake up"},{"artist":"Nylithia","title":"Infector (Intro)"},{"artist":"Nylithia","title":"Super Mario B Castle Theme"},{"artist":"Scorpions/Скорпионс","title":"Wind Of Change/Ветер Перемен  (Версия на русском языке)"},{"artist":"Michael Andrews","title":"Mad World"},{"artist":"John 5","title":"2 Die 4"},{"artist":"Escape the Fate","title":"This War Is Ours (The Guillotine Part II)"},{"artist":"John 5","title":"Damaged"},{"artist":"Marty Friedman","title":"Dragon Mistress"},{"artist":"Pelican","title":"The Creeper"},{"artist":"JELONEK","title":"BaRock"},{"artist":"Blotted Science","title":"Laser Lobotomy"},{"artist":"The String Quartet Tribute  to NIRVANA","title":"Come As You Are "},{"artist":"String Tribute","title":"Tears Don't Fall (BFMV)"},{"artist":"Papa Roach","title":"Change or Die"},{"artist":"Trivium","title":"Dying in your arms"},{"artist":"Disturbed","title":"Decadance"},{"artist":"Bullet For My Valentine","title":"Turn To Despair"},{"artist":"Metallica","title":"Orion [Instrumental]"},{"artist":"Divination","title":"The Heretic Anthem"},{"artist":"Bullet for my Valentine","title":"Say Goodnight (Acoustic Version)"},{"artist":"Кувалда","title":"Бетономешалка"},{"artist":"Slipknot","title":"Confessions"},{"artist":"Bullet For My Valentine","title":"7 Days (Bonus Track)"},{"artist":"Bullet for My Valentine","title":"Forewer and Always (Acoustic Version)"},{"artist":"Bullet For My Valentine","title":"Hearts Burst Into Fire (Acoustic Version)"},{"artist":"In Flames","title":"Everlost (Part II)"},{"artist":"In Flames","title":"Acoustic Medley"},{"artist":"In Flames","title":"Cloud Connected"},{"artist":"In Flames","title":"Crawl Through Knives"},{"artist":"In Flames","title":"Free Fall"},{"artist":"Metallica","title":"Die, Die My Darling"},{"artist":"Slipknot","title":"Psychosocial (Album Version)"},{"artist":"Korn","title":"Jingle Bells"},{"artist":"Stone Sour","title":"Through Glass"},{"artist":"Slipknot","title":"Snuff"},{"artist":"Звонок в компанию Microsoft","title":"Как крякнуть Висту?"},{"artist":"Furious Ball","title":"Fog"},{"artist":"The Beatles","title":"Yellow Submarine"},{"artist":"Lumen","title":"Космонавт"},{"artist":"Lumen","title":"Государство"},{"artist":"Bullet For My Valentine","title":"Tears Don't Fall (Acoustic) (Bonus Track)"},{"artist":"Karunesh","title":"The Wanderer "}],"currentTrack":0}}}

以下代码计算要存储在存储中的对象大小：

for(var i in obj) {
    console.log(i, JSON.stringify(obj[i]).length + i.length)
}

然后它返回

> playlist 3956 

我无法理解，也许是因为我的对象中有 UTF-8 非拉丁符号而产生了这种魔力？也许本机端的 chrome 执行此字符的转义 (\uXXXX) 并获得超过 4096 的长度？如果是这样，我怎样才能让JSON.stringify() 也进行转义？

Answer 1

chrome.storage.sync.QUOTA_BYTES_PER_ITEM 以 字节 为单位指定最大大小。在 Chrome 中，JavaScript 字符串被编码为 UTF-8。 UTF-8“字符”的字节长度是可变的，它可以是 1 也可以是 2。

您的字符串包含“Бетономешалка”。字符串长度为 13，但字节大小为 26。

要检测字符的大小，您可以使用string.charCodeAt(index) 来获取指定索引处的字符串的字符代码。如果此数字小于 256 ( How many bytes in a JavaScript string? 列出了其他一些计算字符串中字节数的方法。

Answer 2

/**
 * Count bytes in a UTF-8 string's representation.
 *
 * @param {string}
 * @return {number}
 */
function byteLength(str) {
    str = String(str); // force string type
    return (new TextEncoder('utf-8').encode(str)).length;
}