网站建设 电子商务网站开发,怎么做企业管理软件定制,微信网站开发语言,曹县网站开发一、sessionStorage
1、简介
sessionStorage用于在浏览器会话期间存储数据#xff0c;数据仅在当前会话期间有效。
存储的数据在用户关闭浏览器标签页或窗口后会被清除。
2、方法
使用sessionStorage.setItem(key, value)方法将数据存储在sessionStorage中。使用sessionSt…一、sessionStorage
1、简介
sessionStorage用于在浏览器会话期间存储数据数据仅在当前会话期间有效。
存储的数据在用户关闭浏览器标签页或窗口后会被清除。
2、方法
使用sessionStorage.setItem(key, value)方法将数据存储在sessionStorage中。使用sessionStorage.getItem(key)方法根据键获取存储的值。使用sessionStorage.removeItem(key)方法根据键删除存储的值。
3、代码示例
列表页搜索条件缓存, 使用sessionStorage实现简单的功能,
存储数据读取数据清除数据
a、存取单个数据
sessionStorage.setItem(param, 我叫你一声你敢答应吗?);
let param sessionStorage.getItem(param)
//我叫你一声你敢答应吗?
console.log(param );
b、存取对象
sessionStorage也可存储Json对象
存储时通过JSON.stringify()将对象转换为文本格式
读取时通过JSON.parse()将文本转换回对象。
sessionStorage.setItem(queryParams, JSON.stringify(this.queryParams));
if (sessionStorage.getItem(queryParams)) {this.queryParams JSON.parse(sessionStorage.getItem(queryParams));
}
c、清除数据
sessionStorage.removeItem(queryParams);
二、localStorage
1、简介 localStorage用于在浏览器中永久存储数据即使用户关闭浏览器标签页或窗口数据仍然保留。存储的数据不会自动过期除非显式地从代码中删除或用户清除浏览器缓存。存放数据大小一般为5MB仅在浏览器中保存不参与服务器通信
2、方法
使用localStorage.setItem(key, value)方法将数据存储在localStorage中。使用localStorage.getItem(key)方法根据键获取存储的值。使用localStorage.removeItem(key)方法根据键删除存储的值。
3、代码示例
// 设置localStorage中的数据
localStorage.setItem(key, value);
// 获取localStorage中的数据
const value localStorage.getItem(key);
console.log(value); // 输出value
// 删除localStorage中的数据
localStorage.removeItem(key);
三、cookie
1、简介
Cookie是一种在浏览器中存储数据的机制用于跟踪和识别用户。可以设置Cookie的过期时间使数据在指定时间后失效。即使用户关闭浏览器存储在Cookie中的数据也可以保留除非设置了过期时间。
2、方法
使用document.cookie属性进行设置和获取Cookie值。使用document.cookie keyvalue; expiresexpiration_time; path/;语法设置Cookie。使用document.cookie获取所有Cookie值。使用document.cookie key; expiresexpiration_time; path/;语法删除Cookie。
3、代码示例
// 设置cookie
document.cookie keyvalue; expiresexpiration_time; path/;;
// 获取所有cookie
const cookies document.cookie;
console.log(cookies);
// 删除cookie
document.cookie key; expiresexpiration_time; path/;;
四、三者区别
这些存储机制各有优劣和适用场景。sessionStorage适用于在会话期间保持数据
localStorage适用于需要永久存储数据的场景
而Cookie用于跟踪用户和设置过期时间的需求。根据具体的应用需求选择适合的存储机制可以更好地管理和存储数据。
1、sessionStorage与localStorage区别
sessionStorage在浏览器会话期间有效而localStorage是持久的。sessionStorage在用户关闭浏览器标签页或窗口时会被清除而localStorage会一直保留。sessionStorage和localStorage的使用方法相似都是使用setItem、getItem和removeItem方法进行操作。
2、sessionStorage、localStorage、cookie区别
存储容量sessionStorage和localStorage都提供了大约5MB的存储空间而Cookie只能存储4KB的数据。生命周期sessionStorage的数据在单个会话期间有效关闭浏览器后数据将被清除localStorage的数据是永久性的除非手动清除或代码删除Cookie可以设置过期时间可以在指定时间之前保持有效。存储位置sessionStorage、localStorage和Cookie数据都存储在客户端不涉及服务器。存储机制sessionStorage、localStorage和Cookie都使用键值对的方式存储数据。跨窗口通信sessionStorage和localStorage不支持跨窗口通信而Cookie支持。跨域名访问sessionStorage和localStorage不支持跨域名访问而Cookie支持。浏览器支持sessionStorage和localStorage在现代浏览器中得到支持而Cookie在所有浏览器中都可用。与服务器交互sessionStorage、localStorage不会自动发送数据到服务器而Cookie在每次HTTP请求中都会自动发送到服务器。
特性sessionStoragelocalStoragecookie存储容量5MB5MB4KB生命周期单个会话期间永久可设置存储位置客户端客户端客户端存储机制键值对键值对键值对跨窗口通信不支持不支持支持跨域名访问不支持不支持支持浏览器支持现代浏览器现代浏览器所有浏览器与服务器交互不自动发送不自动发送自动发送
