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


172

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


我总是使用前缀,以避免与用户脚本潜在的冲突-也可以使用localStorage。
2011年

IMO应该避免冲突的是用户脚本,而不是页面。在我的用户脚本中,我使用以脚本命名的前缀。
卡米洛·马丁

Answers:


195

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

不需要前缀,但是如果需要则使用前缀。另外,是的,您可以随意命名。


77
每个protocol://host:port组合都是唯一的。
thasmo '16

1
www.mysite.it:8012/App1和www.mysite.it:8012/App2是否共享了本地存储?
DarioN1

3
@ DarioN1是,www.mysite.it:8012 / App1和www.mysite.it:8012/App2已共享本地存储。(注意:如果您从不同的协议(例如EG http vs https)访问它们,则不会共享它们。在同一协议,子域,域和端口中,它们是共享的。这是对“来源”概念的简化。 )
威廉

31

存储按来源进行存储,其中“来源”与“ 相同来源策略相同(模式[ httpvs. https等],端口和主机的组合)。从规格

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

因此,的存储http://a.example.com和的存储http://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


3
这本书写得很好,因为它易于阅读和充分解释,所以最喜欢这个答案,即使对于那些刚开始开发的人也是如此。
baHI

1
+1表示“网络存储没有内置机制允许一个来源访问另一个来源”。
法比恩·夸特拉沃

7

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

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

localStorage.key(0);

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


7

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

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


0

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

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.