下面我们通过几个简单的演示再来理解一下 localStorage 的作用域 …

现在你看到的这两个浏览器窗口，打开的是同一个文件 ... 区别是，左边这个窗口我们是 web 服务器里打开的 ... 右边这个窗口，是直接在文件系统里打开的这个文档 ...

你会发现，在地址栏上显示的地址是不一样的 ...

下面，我们可以先点击左边窗口上的这个 设置数据项目 .. 按钮 … 打开开发者工具 ... Resources ... Local Storage ..

在这里，你会看到刚才设置的数据 ... 这个数据存储在了 http://localhost 这个区域里面 ...

再回到右边这个使用文件系统打开的这个文档 …

刷新一下 …

打开控制台 ... Resources 选项卡 ... Local Storage ... 在这个页面上的 Local Storage ，存储的区域是 file:// ... 意思就是，在文件系统这个区域里设置的 Local Storage ... 现在这里仍然是空白的 ...

虽然这两个窗口打开的是同一个文档 … 使用的也是同一个脚本文件 …

但是文档的来源是不一样的 … 一个来自 http://localhost … 另一个来自 file://

同一来源的不同文档

下面我们再打开这个文档所在的目录 … 复制一份这个 index.html … 把它命名为 index-1.html ..

回到浏览器 … 使用 http://localhost 的形式打开刚才创建的 index-1.html …

打开 localStorage ，在这个文档上，同样可以访问到之前设置的 Local Storage 数据 … 虽然 index.html 和 index-1.html 是不同的文档 … 但是他们属性同一个来源 … 也就是 http://localhost …

所以他们之间可以共享 localStorage 数据 …

不同的浏览器

下面再用 safari 浏览器打开这个文档 … http://localhost/storage/index.html …

页面上，也不会显示 localStorage …

因为之前我们设置的 localStorage 是在 chrome 浏览器上 … 所以在 safari 浏览器上，不能读取在 chrome 浏览器上设置的 localStorage 数据 ..