不同的本地存储对象以及如何访问它们

Question

我正在尝试使用 localStorage 从表单中获取值并在第二页上填写第二个表单的某些字段。存储字段部分运行良好，但在第二页上，有一个 iframe，显然它使用了 localStorage。当我尝试在第二页上使用 localStorage 时，它会从 "second" localStorage 中检索值。

    // This displays the correct localStorage info, so on page load, it seems to only be 1 localStorage
    console.log(localStorage);

    // Retrieve session storage fields
    // This comes back as null, second localStorage is loaded?
    var firstName = localStorage.getItem('firstName');
    var lastName = localStorage.getItem('lastname');
    var eMail = localStorage.getItem('eMail');
    var phone = localStorage.getItem('phone');
    var company = localStorage.getItem('company');
    var companyRole = localStorage.getItem('companyRole');

    // This does not work as a result
    j('#first-name').val(firstName);
    j('#last-name').val(lastName);
    j('#phone').val(phone);
    j('#eMail').val(eMail);

当我检查 "application" Chrom 选项卡下的 localStorage 对象时，我看到 2 个对象并检查第一个，我确实看到了我的数据...我还没有找到任何关于如何访问一个不同的 localStorage 对象，这可能吗？

Answer 1

如您所见here:

Local storage is per origin (per domain and protocol). All pages, from one origin, can store and access the same data.

所以，如果页面的域和iframe相同，那么localstorage数据。也就是说localstorage数据是按domain保存的，如果代码在主页面或者iframe里面，可以独立CRUD。

But，也就是如果页面和iframe不在同一个域，你只能访问各自域的localstorage。例如，如果您的 javascript 代码位于 iframe 内，则您无法访问主页的本地存储，反之亦然。

Answer 2

本地和会话存储特定于源。例如，以下来源会产生不同的本地和会话存储对象：
https://example.com/
http://example.com/

即使它们是同一个域，它们也有不同的协议。这使他们的起源不同。

如果您不拥有 iframe 的域，则无法从您自己的应用程序读取或修改跨域存储。另一个来源需要接收修改存储的请求。

不同的本地存储对象以及如何访问它们

Different localStorage Objects and how to acces them

javascript

session-storage

local-storage