掌握存储、历史记录和 URL 对象：JS 学习系列 25

深入了解 Storage 接口

Storage 接口允许脚本在浏览器中存储数据。该接口有两种实现：

• sessionStorage ：存储的数据只在浏览器会话期间可用。当会话结束时（通常是当窗口关闭时），数据将被清除。
• localStorage ：存储的数据在浏览器会话之间是持久的。这意味着即使您关闭并重新打开浏览器，数据也将仍然可用。

您可以使用以下语法访问 Storage 对象：

const storage = window.sessionStorage;

或

const storage = window.localStorage;

要存储数据，请使用 setItem() 方法：

storage.setItem('key', 'value');

要检索数据，请使用 getItem() 方法：

const value = storage.getItem('key');

要删除数据，请使用 removeItem() 方法：

storage.removeItem('key');

您还可以使用 clear() 方法清除存储中的所有数据：

storage.clear();

探索历史记录对象

History 对象允许脚本管理浏览器的历史记录。您可以使用以下语法访问 History 对象：

const history = window.history;

要返回到上一页，请使用 back() 方法：

history.back();

要前进到下一页，请使用 forward() 方法：

history.forward();

要转到特定的 URL，请使用 go() 方法：

history.go(-2); // 返回两页

您还可以使用 pushState() 和 replaceState() 方法来更改当前页面的 URL，而不会加载新页面。这对于创建单页面应用程序非常有用。

了解 URL 相关对象

URL 相关对象允许脚本访问有关当前 URL 的信息。有三个主要的对象：

• location ：包含有关当前 URL 的信息，例如协议、主机名、端口号和路径。
• URLSearchParams ：允许您访问和操作 URL 查询参数。
• URL ：允许您创建和解析 URL。

您可以使用以下语法访问 location 对象：

const location = window.location;

要获取当前 URL，请使用 href 属性：

const url = location.href;

要获取协议（例如“http”或“https”），请使用 protocol 属性：

const protocol = location.protocol;

要获取主机名（例如“www.example.com”），请使用 hostname 属性：

const hostname = location.hostname;

要获取端口号（例如“80”或“443”），请使用 port 属性：

const port = location.port;

要获取路径（例如“/path/to/page.html”），请使用 pathname 属性：

const pathname = location.pathname;

要获取查询参数（例如“?foo=bar”），请使用 search 属性：

const search = location.search;

要获取哈希（例如“#section-1”），请使用 hash 属性：

const hash = location.hash;

您可以使用以下语法访问 URLSearchParams 对象：

const params = new URLSearchParams(location.search);

要获取查询参数的值，请使用 get() 方法：

const value = params.get('foo');

要设置查询参数的值，请使用 set() 方法：

params.set('foo', 'bar');

要删除查询参数，请使用 delete() 方法：

params.delete('foo');

您可以使用以下语法访问 URL 对象：

const url = new URL('https://www.example.com/path/to/page.html');

要获取协议，请使用 protocol 属性：

const protocol = url.protocol;

要获取主机名，请使用 hostname 属性：

const hostname = url.hostname;

要获取端口号，请使用 port 属性：

const port = url.port;

要获取路径，请使用 pathname 属性：

const pathname = url.pathname;

要获取查询参数，请使用 search 属性：

const search = url.search;

要获取哈希，请使用 hash 属性：

const hash = url.hash;

结语

Storage、History 和 URL 相关对象是 JavaScript 中强大的工具，可让您创建功能强大的 Web 应用程序。通过了解这些对象，您可以轻松地在浏览器中存储数据、管理历史记录并操作 URL。