sessionStorage localStorage
Window.sessionStorage - Web API 接口参考 | MDN https://developer.mozilla.org/zh-CN/docs/Web/API/Window/sessionStorage
Window.sessionStorage
sessionStorage
属性允许你访问一个,对应当前源的 session Storage
对象。它与 localStorage
相似,不同之处在于 localStorage
里面存储的数据没有过期时间设置,而存储在 sessionStorage
里面的数据在页面会话结束时会被清除。
- 页面会话在浏览器打开期间一直保持,并且重新加载或恢复页面仍会保持原来的页面会话。
- 在新标签或窗口打开一个页面时会复制顶级浏览会话的上下文作为新会话的上下文,这点和 session cookies 的运行方式不同。
- 打开多个相同的URL的Tabs页面,会创建各自的
sessionStorage
。 - 关闭对应浏览器窗口(Window)/ tab,会清除对应的
sessionStorage
。
应该注意,存储在sessionStorage或localStorage中的数据特定于页面的协议。也就
是说http://example.com
与 https://example.com
的sessionStorage相互隔离。
被存储的键值对总是以UTF-16 DOMString 的格式所存储,其使用两个字节来表示一个字符。对于对象、整数key值会自动转换成字符串形式。
语法
// 保存数据到 sessionStorage
sessionStorage.setItem('key', 'value');
// 从 sessionStorage 获取数据
let data = sessionStorage.getItem('key');
// 从 sessionStorage 删除保存的数据
sessionStorage.removeItem('key');
// 从 sessionStorage 删除所有保存的数据
sessionStorage.clear();
返回值
一个 Storage
对象。
示例
下面的代码访问当前域名的 session Storage
对象,并使用 Storage.setItem()
访问往里面添加一个数据条目。
sessionStorage.setItem('myCat', 'Tom');
下面的示例会自动保存一个文本输入框的内容,如果浏览器因偶然因素被刷新了,文本输入框里面的内容会被恢复,因此写入的内容不会丢失。
// 获取文本输入框
let field = document.getElementById("field");
// 检测是否存在 autosave 键值
// (这个会在页面偶然被刷新的情况下存在)
if (sessionStorage.getItem("autosave")) {
// 恢复文本输入框的内容
field.value = sessionStorage.getItem("autosave");
}
// 监听文本输入框的 change 事件
field.addEventListener("change", function() {
// 保存结果到 sessionStorage 对象中
sessionStorage.setItem("autosave", field.value);
Window.sessionStorage
The read-only sessionStorage
property accesses a session Storage
object for the current origin. sessionStorage
is similar to localStorage
; the difference is that while data in localStorage
doesn't expire, data in sessionStorage
is cleared when the page session ends.
- Whenever a document is loaded in a particular tab in the browser, a unique page session gets created and assigned to that particular tab. That page session is valid only for that particular tab.
- A page session lasts as long as the tab or the browser is open, and survives over page reloads and restores.
- Opening a page in a new tab or window creates a new session with the value of the top-level browsing context, which differs from how session cookies work.
- Opening multiple tabs/windows with the same URL creates
sessionStorage
for each tab/window. - Duplicating a tab copies the tab's
sessionStorage
into the new tab. - Closing a tab/window ends the session and clears objects in
sessionStorage
.
Data stored in sessionStorage
is specific to the protocol of the page. In particular, data stored by a script on a site accessed with HTTP (e.g., http://example.com) is put in a different sessionStorage
object from the same site accessed with HTTPS (e.g., https://example.com).
The keys and the values are always in the UTF-16 DOMString
format, which uses two bytes per character. As with objects, integer keys are automatically converted to strings.
Syntax
myStorage = window.sessionStorage;
Value
A Storage
object which can be used to access the current origin's session storage space.
Exceptions
SecurityError
-
The request violates a policy decision, or the origin is not a valid scheme/host/port tuple (this can happen if the origin uses the
file:
ordata:
scheme, for example). For example, the user may have their browser configured to deny permission to persist data for the specified origin.
Examples
Basic usage
// Save data to sessionStorage
sessionStorage.setItem('key', 'value');
// Get saved data from sessionStorage
let data = sessionStorage.getItem('key');
// Remove saved data from sessionStorage
sessionStorage.removeItem('key');
// Remove all saved data from sessionStorage
sessionStorage.clear();
Saving text between refreshes
The following example autosaves the contents of a text field, and if the browser is refreshed, restores the text field content so that no writing is lost.
// Get the text field that we're going to track
let field = document.getElementById("field");
// See if we have an autosave value
// (this will only happen if the page is accidentally refreshed)
if (sessionStorage.getItem("autosave")) {
// Restore the contents of the text field
field.value = sessionStorage.getItem("autosave");
}
// Listen for changes in the text field
field.addEventListener("change", function() {
// And save the results into the session storage object
sessionStorage.setItem("autosave", field.value);
});
Note: Please refer to the Using the Web Storage API article for a full example.
Window.sessionStorage - Web APIs | MDN https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage