前端存儲：localStorage、sessionStorage

IDE：HBuilder X 3.8.12

--

 

序章

前端存儲數據的方式 有以下幾種：

1. JavaScript Cookie
2. Web存儲
   1. localStorage
   2. sessionStorage
3. HTML5 Web SQL 數據庫
4. IndexedDB

 

本文測試其中的 Web存儲：localStorage、sessionStorage。

1. 添加數據
2. 查看數據
   1. 普通數據
   2. JSON數據
3. 刪除數據
4. 清空數據

 

localStorage

位於 window 對象下面。

存儲 key/value 對 數據，其中，value的類型永遠是 string。

存儲大小限制：5MB~10MB，不同瀏覽器不同（見參考資料 #4）。

在頁面存儲數據，數據有效範圍是 整個站點——協議+域名+端口。

有效時間：永久。或者，直到用戶手動清理了數據時。

頁面關閉後，再次打開該站點的，之前存儲的數據仍然存在——可訪問。

 

注意，使用時需要清理掉不用的數據，以免超過存儲的最大限制。

 

測試方式：

頁面1 寫數據；

頁面2 僅讀取數據。

 

測試代碼：

// window.localStorage
console.log('window.localStorage:');
console.log(window.localStorage);
console.log(typeof window.localStorage);
console.log(window.localStorage.length);
let len = window.localStorage.length;
for(let i=0; i<len; i++) {
	console.log(i + ", " + window.localStorage.key(i));
}

// 添加
window.localStorage.setItem("key1", "第一個鍵");
window.localStorage.setItem("中文2", "第2個鍵");

// 添加 JSON
let jdata = {
	name: 'name1',
	age: 12.31
};
console.log('添加 JSON：');
window.localStorage.setItem('json1', jdata);
window.localStorage.setItem('json2Str', JSON.stringify(jdata));

let jarr = [1, 2, 3, 4];
console.log('添加 J array：');
window.localStorage.setItem('jarr1', jarr);
window.localStorage.setItem('jarr2Str', JSON.stringify(jarr));

let jarro = [
	{
		lat: 12.13,
		lgt: 99.89
	},
	{
		lat: 612.13,
		lgt: 699.89
	},
];
console.log('添加 J array：');
window.localStorage.setItem('jarro1', jarro);
window.localStorage.setItem('jarro2Str', JSON.stringify(jarro));

// 獲取
console.log(window.localStorage.length);
len = window.localStorage.length;
for(let i=0; i<len; i++) {
	let keyi = window.localStorage.key(i);
	let vali = window.localStorage.getItem(keyi);
	console.log(i + ", " + keyi + ", val=" + vali);
	console.log(typeof vali);
	console.log(vali);
	if (vali[0] == '{') {
		let pjdata = JSON.parse(vali);
		console.log(pjdata);
	}
	if (vali[0] == '[' && ! vali.startsWith('[object Object')) {
		let pjdata = JSON.parse(vali);
		console.log(pjdata);
	}
}

 

測試結果：

默認情況下，localStorage 是空的。下面的測試結果是在之前測試時留下的。

關於 JSON 數據的存取：

1、存入時，使用 JSON.stringify 函數 轉換爲字符串；

2、取出時，使用 JSON.parse 函數 轉換爲 JSON對象或數組；

3、JSON 數組中的元素是 基本數據類型（字符串、數字等）時，會用都好把 元素連起來（比如，1,2,3,4）。

總之，JSON數據存入時，需要轉換。

除了，JSON數據，其它 JavaScript 對象 存入時，也需要做相應的處理。

 

測試新頁面訪問上面的數據：

寫一個循環語句獲取即可，參考上面的代碼。

獲取成功。

 

數據存儲完畢，可以在 瀏覽器的控制檯 查看存儲的內容：

測試用的瀏覽器：

1. Google Chrome Version 119.0.6045.124 (Official Build) (64-bit)
2. Microsoft Edge 版本 110.0.1587.41 (正式版本) (64 位)

 

sessionStorage

和 localStorage 類似，不同點在於，僅在當前頁面有效——單個頁面！

注意，當前頁面（窗口 或 標籤頁）關閉後，數據消失。

 

不提供 代碼和測試結果了，測試方式 同 localStorage 。

把 上面代碼的 localStorage 改爲 sessionStorage 即可。

 

在實踐中用法（猜測）

存儲某些固定不變的數據，避免打開頁面時再次請求，比如，國家地理信息。

打開頁面，檢查是否有數據，有的話就不請求後臺。

可以節省一些帶寬。

 

---END---

 

作者水平有限，如有錯漏，歡迎指正。

 

本文鏈接：

https://www.cnblogs.com/luo630/p/17824066.html

 

參考資料

1、JavaScript 參考手冊》JavaScript 存儲對象

https://www.runoob.com/jsref/obj-storage.html

https://www.runoob.com/jsref/prop-win-localstorage.html

https://www.runoob.com/html/html5-webstorage.html

2、IndexedDB

https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API

3、HTML5 Web SQL 數據庫

https://www.runoob.com/html/html5-web-sql.html

4、localstorage的存儲大小

https://deepinout.com/html/localstorage/17_the_size_of_localstorage.html

5、

 

ben發佈於博客園

ben發佈於博客園