在 HTML5 中，localStorage 对象是否按页面/域隔离？

Question

HTML5 localStorage 对象是否按页面/域隔离？我想知道如何命名 localStorage 键。我需要单独的前缀吗？或者我可以随意命名它们吗？

Answer 1

它针对每个域和端口（与同源策略相同的隔离规则），要使其按页面显示，您必须使用基于位置的密钥或其他方法。

您不需要前缀，但如果需要，请使用前缀。另外，是的，您可以随意命名它们。

Answer 2

商店按来源划分，其中“来源”与相同来源相同策略（架构 [http 与 https 等]、端口和主机的组合）。来自规范：

每个顶级浏览上下文都有一组唯一的会话存储区域，每个源对应一个。

因此，http://a.example.com 的存储和 http://b.example.com 的存储是分开的（并且它们都是分开的）来自 http://example.com），因为这些都是不同的主机。同样，http://example.com:80 和 http://example.com:8080 和 https://example.com都是不同的起源。

Web 存储中没有内置机制允许一个源访问另一个源的存储。

请注意，它是来源，而不是 URL，因此 http://example.com/page1 和 http://example.com/page2 都是有权访问 http://example.com 的存储。

Answer 3

是的，每个域/子域都有不同的 localStorage，您可以随意调用这些键（不需要前缀）。

要获取密钥，您可以使用方法 key(index) 例如

localStorage.key(0);

There was an object called globalStorage before you can have multiple localStorages, but it's be deprecated from the specs

Answer 4

正如其他人指出的那样，localStorage 对于每个协议、主机和存储都是唯一的。港口。如果您想要一种方便的方法来使用前缀键控制存储，我建议 localDataStorage。

它不仅可以通过给键添加前缀来帮助在同一域内强制分段共享存储，还可以透明地存储 javascript 数据类型（数组、布尔值、日期、浮点型、整数、字符串和对象），提供轻量级数据混淆，自动压缩字符串，以及方便按键（名称）查询以及按（键）值查询。

[免责声明] 我是该实用程序的作者 [/免责声明]

示例：

// instantiate our first storage object
// internally, all keys will use the specified prefix, i.e. passphrase.life
var localData = localDataStorage( 'passphrase.life' );

localData.set( 'key1', 'Belgian' )
localData.set( 'key2', 1200.0047 )
localData.set( 'key3', true )
localData.set( 'key4', { 'RSK' : [1,'3',5,'7',9] } )
localData.set( 'key5', null )

localData.get( 'key1' )   -->   'Belgian'
localData.get( 'key2' )   -->   1200.0047
localData.get( 'key3' )   -->   true
localData.get( 'key4' )   -->   Object {RSK: Array(5)}
localData.get( 'key5' )   -->   null


// instantiate our second storage object
// internally, all keys will use the specified prefix, i.e. prismcipher.com
var localData2 = localDataStorage( 'prismcipher.com' );

localData2.set( 'key1', 123456789 )  // integer

localData2.get( 'key1' )   -->   123456789

如您所见，原始值受到尊重，并且您可以创建多个实例来控制存储。

Answer 5

如果您想按页进行，我只需在键前添加 href 位置（为了更好的测量，我去掉了冒号和斜杠）：

let pageName = location.href.replaceAll('/','').replaceAll(':','');
sessionStorage[pageName + '_scrollTop'] = $(this).scrollTop();

取自我的“恢复滚动位置”脚本的完整版本： https://stackoverflow.com/a/75359943/4885073

Answer 6

正如 Nick 建议的那样，它可以在该域的任何地方使用，作为替代方案，sessionStorage 的工作方式略有不同，因为它与浏览器窗口本身不同。也就是说，同一域上的其他选项卡或窗口无权访问存储对象的同一副本。