js中的sessionStorage

简介: js中的sessionStorage

sessionStorage属性

该sessionStorage属性允许您访问当前源的会话Storage对象。sessionStorage类似于Window.localStorage; 唯一的区别是当存储在localStorage中的数据没有到期设置时,存储在sessionStorage中的数据在页面会话结束时被清除。只要浏览器处于打开状态,页面会话就会持续,并且会在页面重新加载和恢复后继续存在。在新选项卡或窗口中打开页面将导致启动新会话,这与会话cookie的工作方式不同。

需要注意的是,存储在sessionStorage或localStorage  中的数据特定于页面协议的。

sessionStorage属性语法

// Save data to sessionStorage
sessionStorage.setItem('key', 'value');
// Get saved data from sessionStorage
var data = sessionStorage.getItem('key');
// Remove saved data from sessionStorage
sessionStorage.removeItem('key');
// Remove all saved data from sessionStorage
sessionStorage.clear();
essionStorage属性值

一个Storage对象。

sessionStorage属性示例

以下代码段访问当前域的会话Storage对象,并使用Storage.setItem()向它添加数据项:

sessionStorage.setItem('myCat', 'Tom');

以下示例自动保存文本字段的内容,如果浏览器被意外刷新,则还原文本字段内容,以便不会丢失写入内容:

// 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);
});
相关文章
|
4月前
|
存储 JavaScript 前端开发
JavaScript中的sessionStorage
JavaScript中的sessionStorage
29 0
|
4月前
|
存储 JavaScript 前端开发
js中session、cookie、 localStorage和SessionStorage的区别和特点
js中session、cookie、 localStorage和SessionStorage的区别和特点
|
28天前
|
存储 JavaScript 前端开发
JavaScript DOM 操作:解释一下 cookie、sessionStorage 和 localStorage 的区别。
Cookie是服务器发送至客户端的文本信息,会随每个请求发送回服务器,适合控制会话状态但可能暴露隐私。SessionStorage仅在当前会话中存储数据,关闭浏览器后清除,适合临时存储如登录状态。LocalStorage则持久保存数据,即使关闭浏览器也不会清除,适用于存储长期设置。三种方式各有侧重,应按需求选择。
17 0
|
6月前
|
存储 JavaScript 前端开发
js中session、cookie、 localStorage和SessionStorage的区别和特点
js中session、cookie、 localStorage和SessionStorage的区别和特点
45 0
|
7月前
|
存储 JavaScript 前端开发
带你读《现代Javascript高级教程》十九、详解Cookie, Session, SessionStorage, LocalStorage(1)
带你读《现代Javascript高级教程》十九、详解Cookie, Session, SessionStorage, LocalStorage(1)
|
7月前
|
存储 JavaScript 前端开发
带你读《现代Javascript高级教程》十九、详解Cookie, Session, SessionStorage, LocalStorage(2)
带你读《现代Javascript高级教程》十九、详解Cookie, Session, SessionStorage, LocalStorage(2)
|
7月前
|
存储 缓存 前端开发
带你读《现代Javascript高级教程》十九、详解Cookie, Session, SessionStorage, LocalStorage(3)
带你读《现代Javascript高级教程》十九、详解Cookie, Session, SessionStorage, LocalStorage(3)
|
8月前
|
存储 JavaScript 前端开发
js本地存储localStorage和sessionStorage
js本地存储localStorage和sessionStorage
|
10月前
|
存储 移动开发 JavaScript
js本地存储(localStorage)和(sessionStorage)
js本地存储(localStorage)和(sessionStorage)
179 0
|
存储 JavaScript 前端开发
JavaScript——localStorage和sessionStorage的使用方法
localStorage和sessionStorage的使用方法
144 0