在 HTML5 中,localStorage 对象是否按页面/域隔离?

IT技术 javascript html local-storage
2021-02-01 02:11:59

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

5个回答

它是按域和端口(与同源策略相同的隔离规则),要使其按页显示,您必须使用基于location或其他方法的密钥

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

@DarioN1 是的,www.mysite.it:8012/App1 和 www.mysite.it:8012/App2 共享本地存储。(警告:如果您从不同的协议访问它们,例如 http 和 https,它们不会共享。在同一协议中,子域、域和端口 - 它们是共享的。这是对“起源”概念的简化。 )
2021-03-15 02:11:59
www.mysite.it:8012/App1 和 www.mysite.it:8012/App2 共享本地存储吗?
2021-03-17 02:11:59
file:/// 协议为每个目录单独存储变量。
2021-03-29 02:11:59
每个protocol://host:port组合都是独一无二的
2021-04-04 02:11:59

存储是每个 origin,其中“origin”与同源策略相同(模式 [ httpvs.https等]、端口和主机的组合)。规范

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

因此,存储 forhttp://a.example.com和存储 forhttp://b.example.com是分开的(并且它们都与 分开http://example.com),因为它们都是不同的主机。同样,http://example.com:80http://example.com:8080https://example.com都是不同的起源。

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

需要注意的是它的起源,而不是URL,所以http://example.com/page1http://example.com/page2都具有访问存储的http://example.com

真的很喜欢你区分网址和来源的方式,谢谢
2021-03-21 02:11:59
这篇写得非常好,最喜欢这个答案,因为它易于阅读和完整解释,即使对于那些刚刚开始开发的人也是如此。
2021-04-01 02:11:59
+1 提到“网络存储中没有内置机制允许一个源访问另一个源的存储。”
2021-04-10 02:11:59

正如其他人指出的那样,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

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

是的,每个域/子域都有不同的localStorage,您可以随意调用密钥(不需要前缀)。

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

localStorage.key(0);

之前有一个名为globalStorage的对象,您可以在其中拥有多个 localStorage,但它已从规范中弃用

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