JavaScript学习-存储操作(browser)

最新推荐文章于 2023-11-01 23:28:32 发布

原创最新推荐文章于 2023-11-01 23:28:32 发布 · 278 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

28 篇文章

订阅专栏

本文深入解析前端存储技术，包括sessionStorage和localStorage的使用方法，如何存储字符串、数组和对象，以及数据的读取和删除操作。

文章目录

一、存储方式
- 1.1 回话存储——sessionStorage
- 1.2 本地存储——localStorage
二、存修数据——setItem
三、读取数据
五、删除数据
- 5.1 单个键值对
- 5.2 所有键值对

一、存储方式

1.1 回话存储——sessionStorage

语法：widow.sessionStorage
含义：临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

1.2 本地存储——localStorage

语法：widow.localStorage
含义：长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。

二、存修数据——setItem

语法：localStorage.setItem(keyname, value)
含义：若无则存，若有则改。

2.1 单字符串

var localstorage = window.localStorage;
function savelocalStorage(){
	// 写入一：name = "张三";
	localstorage["name"] = "张三";
	// 写入二：age = 18;
	localstorage.age = 18;
	// 写入三：scores = 8;
	localstorage.setItem("scores", 8);
	//console.log(typeof storage["name"]);
	//console.log(typeof storage["age"]);
	//console.log(typeof storage["scores"]);
}
savelocalStorage();

2.2 数组

var localstorage = window.localStorage;
var array1 = [["1","2","3"],["4","5","6"],["7","8","9"]];
var stuJS;
// ======================数组存储================
function saveObject(stuJS){
	var stuJSON = JSON.stringify(stuJS);
	localstorage.setItem("stuJS", stuJSON);
	console.log(localstorage.stuJS);
// 结果为："[["1","2","3"],["4","5","6"],["7","8","9"]]"
	console.log(typeof localstorage.stuJS);
	// 结果为：string
}
saveObject(stu);
// ======================数组读取================
function readObject(stuJS){	
	var stuJSON2=localstorage.getItem("stuJS");
	var stuJS2=JSON.parse(stuJSON2);
	console.log(stuJS2);
	// 结果为：[["1","2","3"],["4","5","6"],["7","8","9"]]
	console.log(typeof stuJS2);
	// 结果为：object
}
readObject(stuJS);

2.3 对象

var localstorage = window.localStorage;
// ======================对象存储================
var stu = {name:"张三", sex:"man", hobby:"program"};
var stuJS;
function saveObject(stuJS){
// 把JavaScript对象转化为JSON字符串
	var stuJSON = JSON.stringify(stuJS);
// 存储JSON字符串
	localstorage.setItem("stuJS", stuJSON);
	console.log(localstorage.stuJS);
// 结果为：{"name":"张三","sex":"man","hobby":"program"}
}
saveObject(stu);
// ======================对象读取================
function readObject(stuJS){	
	var stuJSON2=localstorage.getItem("stuJS");
	// 把JSON字符串转化为JavaScript对象
	var stuJS2=JSON.parse(stuJSON2);
	console.log(stuJS2);
	// 结果为：{name: "张三", sex: "man", hobby: "program"}
}
readObject(stuJS);

三、读取数据

2.1 key/value数量

语法：localStorage.length
含义：返回存储对象中包含多少条数据。

2.2 key名

语法：localStorage.key(n)
含义：返回存储对象中第 n 个键的名称

2.3 value值

语法：localStorage.getItem(keyname)
含义：返回指定键的值

var localstorage = window.localStorage;
function readlocalStorage(){
// ====根据键值名读取键值=
	// 读取法一：
	var name = localstorage["name"];
	// 读取法二：
	var age = localstorage.age;
	// 读取法三：
	var scores = localstorage.getItem("scores");
// ====根据键值序号读取==
	for(var i = 0; i < localstorage.length; i++){
		// 读取键值名
		var key = localstorage.key(i);
		// 读取键值
		var keyvalue = localstorage.getItem(key);
		console.log(key,keyvalue);
	}
}
readlocalStorage();

五、删除数据

5.1 单个键值对

语法：localStorage.removeItem(keyname)
含义：移除键

5.2 所有键值对

语法：localStorage.clear()
含义：清除存储对象中所有的键

var localstorage = window.localStorage;
function clearlocalStorage(){
	// 清除某个键值对
	storage.removeItem("scores");
	// 清空所有内容
	storage.clear();
}
clearlocalStorage();*/