Window.localStorage和sessionStorage

最新推荐文章于 2024-09-04 08:57:50 发布

转载最新推荐文章于 2024-09-04 08:57:50 发布 · 555 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage

文章标签：

#前端 #json #javascript

搬运于

Window.localStorage - Web API 接口参考 | MDN (mozilla.org)

Window.localStorage

只读的localStorage 属性允许你访问一个Document 源（origin）的对象 Storage；存储的数据将保存在浏览器会话中。localStorage 类似 sessionStorage，但其区别在于：存储在 localStorage 的数据可以长期保留；而当页面会话结束——也就是说，当页面被关闭时，存储在 sessionStorage 的数据会被清除。

应注意，无论数据存储在 localStorage 还是 sessionStorage ，它们都特定于页面的协议。

另外，localStorage 中的键值对总是以字符串的形式存储。 (需要注意，和 js 对象相比，键值对总是以字符串的形式存储意味着数值类型会自动转化为字符串类型).

使用

	window.onload=function(){
$('.cs').click(function(){

var username=	$(".name").val();
alert(username);
//存储数据
	localStorage.setItem('myName',username );
// 读取数据
	let cat = localStorage.getItem('myName');

	alert("localStorage存储的数据"+cat);
});
	};

存储json数据

var  data = {name:"小威编程"};
data = JSON.stringify(data);
localStorage.setItem("data1",data);

效果：

拿出来的时候JSON.parse(); //将JSON格式的字符串转换成JSON对象进行处理

var str = localStorage.getItem("data1");
var obj = JSON.parse(str);
console.log(obj);

Window.sessionStorage

sessionStorage 属性允许你访问一个，对应当前源的 session Storage 对象。它与 localStorage 相似，不同之处在于 localStorage 里面存储的数据没有过期时间设置，而存储在 sessionStorage 里面的数据在页面会话结束时会被清除。

页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。
在新标签或窗口打开一个页面时会复制顶级浏览会话的上下文作为新会话的上下文，这点和 session cookies 的运行方式不同。
打开多个相同的 URL 的 Tabs 页面，会创建各自的 sessionStorage。
关闭对应浏览器标签或窗口，会清除对应的 sessionStorage。

使用

// 保存数据到 sessionStorage
sessionStorage.setItem('key', 'value');

// 从 sessionStorage 获取数据
let data = sessionStorage.getItem('key');

// 从 sessionStorage 删除保存的数据
sessionStorage.removeItem('key');

// 从 sessionStorage 删除所有保存的数据
sessionStorage.clear();