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

uyto3xhc  于 2023-02-07  发布在  Java
关注(0)|答案(6)|浏览(177)

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

7z5jn7bk

7z5jn7bk1#

它是基于域和端口的(与同源策略相同的隔离规则),要使它基于页面,您必须使用基于location的密钥,或其他方法。
你不需要前缀,如果你需要的话就用一个。而且,是的,你可以给它们起任何你想要的名字。

cnh2zyt3

cnh2zyt32#

存储区是 per origin,其中“origin”与Same Origin Policy相同(架构[ http vs. https等]、端口和主机的组合)。从the spec
每个顶级浏览上下文都有一组唯一的会话存储区域,每个源对应一个区域。
因此,http://a.example.com的存储和http://b.example.com的存储是独立的(它们都与http://example.com独立),因为它们都是不同的主机。同样,http://example.com:80http://example.com:8080https://example.com都是不同的源。
web存储中没有内置机制允许一个源访问另一个源的存储。
注意,它是 origin,而不是URL,因此http://example.com/page1http://example.com/page2都可以访问http://example.com的存储。

c8ib6hqw

c8ib6hqw3#

是的,每个域/子域都有一个不同的localStorage,您可以随意调用这些键(不需要前缀)。
要获取键,可以使用方法key(index),例如

localStorage.key(0);

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

bfnvny8b

bfnvny8b4#

正如其他人所指出的,LocalStorage在每个协议、主机和端口上都是唯一的。如果您想要一种方便的方法来使用前缀键控制您的存储,我建议使用localDataStorage
它不仅通过前缀键帮助在同一域中强制执行分段共享存储,还透明地存储javascript数据类型(Array、Boolean、Date、Float、Integer、String和Object),提供轻量级数据混淆,自动压缩字符串,并方便按键(名称)查询和按(键)值查询。
[免责声明]我是该实用程序的作者[/免责声明]
示例:

// 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

正如您所看到的,基元值得到了尊重,您可以创建几个示例来控制存储。

pw9qyyiw

pw9qyyiw5#

如果你想每页都有,我只需要在键前面加上href位置(为了更好的度量,我去掉了冒号和斜线):

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

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

wkftcu5l

wkftcu5l6#

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

相关问题