JavaScript-如何使用localStorag

JavaScript-如何使用localStorage存儲對象

indow.localStorage 介紹

只讀的localStorage 屬性允許你訪問一個Document 源（origin）的對象 Storage；存儲的數(shù)據(jù)將保存在瀏覽器會話中。

localStorage 類似 sessionStorage，但其區(qū)別在于：存儲在 localStorage 的數(shù)據(jù)可以長期保留；而當(dāng)頁面會話結(jié)束——也就是說，當(dāng)頁面被關(guān)閉時，存儲在 sessionStorage 的數(shù)據(jù)會被清除。

測試樣例

localStorage功能僅限于處理字符串鍵/值對。

解決方法是在存儲對象之前將其字符串化，然后在檢索它時對其進(jìn)行解析：

let obj={ name: "頭條", user: "新浪潮" };

window.localStorage.setItem("obj", JSON.stringify(obj));

let getObj=window.localStorage.getItem("obj");

console.log("getObj: ", JSON.parse(getObj));

只能在瀏覽器的控制臺測試哦

對象有關(guān)系的內(nèi)存空間：

①棧空間

存放的數(shù)據(jù)大小比較小, 一般大小固定的信息適合存放在該空間, 例如整型、boolean、對象的引用(名稱)。

②堆空間

該空間存儲的數(shù)據(jù)比較多, 空間較大, 一般數(shù)據(jù)長度不固定的信息在該空間存放, 例如： string、Array、對象實體

③數(shù)據(jù)空間

該空間存放常量、類的靜態(tài)屬性

④代碼空間

存放函數(shù)體代碼、方法體代碼

言

JavaScript 的 Window 對象是瀏覽器對象模型（BOM）的核心，它為開發(fā)者提供了操作瀏覽器窗口和控制用戶體驗的強(qiáng)大工具。本篇文章將帶你深入了解 Window 對象的各個方面：BOM、JavaScript 執(zhí)行機(jī)制、Location 對象、Navigator 對象、History 對象以及本地存儲。

1. 瀏覽器對象模型（BOM）

什么是 BOM？

BOM 全稱為瀏覽器對象模型（Browser Object Model），它提供了與瀏覽器互動的各種接口和方法。通過 BOM，開發(fā)者可以訪問和操作瀏覽器窗口、文檔、歷史記錄等。BOM 的核心對象是 Window 對象。

代碼示例：

// 設(shè)置窗口的高度和寬度
window.innerHeight=800;
window.innerWidth=1200;

// 打開一個新窗口
let newWindow=window.open('https://www.example.com', '_blank');

2. JavaScript 執(zhí)行機(jī)制

JavaScript 代碼在瀏覽器中的執(zhí)行機(jī)制主要包括兩個方面：事件循環(huán)和回調(diào)隊列。

事件循環(huán)：

事件循環(huán)（Event Loop）是 JavaScript 的執(zhí)行模型，它確保非阻塞操作能夠正常執(zhí)行。

代碼示例：

console.log('任務(wù)開始');

setTimeout(()=> {
  console.log('異步任務(wù)');
}, 2000);

console.log('任務(wù)結(jié)束');

執(zhí)行順序為：

任務(wù)開始
任務(wù)結(jié)束
異步任務(wù)（2秒后輸出）

3. Location 對象

用法：

Location 對象包含有關(guān)當(dāng)前 URL 的信息，并提供了一些重定向和導(dǎo)航的方法。

常用屬性和方法：

location.href：獲取或設(shè)置當(dāng)前 URL
location.reload()：重新加載頁面
location.assign(url)：加載新的 URL

代碼示例：

// 獲取當(dāng)前 URL
console.log(location.href);

// 重定向到新的 URL
location.href='https://www.new-url.com';

// 重新加載當(dāng)前頁面
location.reload();

4. Navigator 對象

用法：

Navigator 對象包含有關(guān)瀏覽器的信息，如瀏覽器名稱、版本、以及用戶代理信息。

常用屬性和方法：

navigator.userAgent：返回用戶代理字符串
navigator.geolocation：提供用戶地理位置

代碼示例：

// 獲取用戶代理信息
console.log(navigator.userAgent);

// 獲取用戶地理位置
navigator.geolocation.getCurrentPosition((position)=> {
  console.log(`Latitude: ${position.coords.latitude}, Longitude: ${position.coords.longitude}`);
});

5. History 對象

用法：

History 對象允許操作瀏覽器的歷史記錄（會話歷史）。

常用屬性和方法：

history.back()：返回到上一頁
history.forward()：前進(jìn)到下一頁
history.go(n)：加載歷史記錄中的某個特定頁面

代碼示例：

// 返回上一個頁面
history.back();

// 前進(jìn)到下一個頁面
history.forward();

// 前往歷史記錄中的第一個頁面
history.go(-1);

6. 本地存儲（Local Storage）

用法：

本地存儲是一種在客戶端存儲數(shù)據(jù)的方式，數(shù)據(jù)存儲在瀏覽器中，不會隨頁面刷新而丟失。

常用方法：

localStorage.setItem(key, value)：存儲數(shù)據(jù)
localStorage.getItem(key)：獲取數(shù)據(jù)
localStorage.removeItem(key)：刪除數(shù)據(jù)
localStorage.clear()：清除所有數(shù)據(jù)

代碼示例：

// 存儲數(shù)據(jù)
localStorage.setItem('username', 'john_doe');

// 獲取數(shù)據(jù)
let username=localStorage.getItem('username');
console.log(username); // 輸出: john_doe

// 刪除數(shù)據(jù)
localStorage.removeItem('username');

// 清空所有數(shù)據(jù)
localStorage.clear();

結(jié)論

通過對這些對象和機(jī)制的深入了解，你可以更好地利用 JavaScript 提供的各種功能來優(yōu)化用戶體驗，增強(qiáng)應(yīng)用程序的互動性。無論是控制瀏覽器窗口、獲取用戶信息，還是操作歷史記錄和本地存儲，掌握這些知識都會讓你的開發(fā)工作事半功倍。

整合營銷服務(wù)商

JavaScript-如何使用localStorag

indow.localStorage 介紹

測試樣例

言

1. 瀏覽器對象模型（BOM）

什么是 BOM？

代碼示例：

2. JavaScript 執(zhí)行機(jī)制

事件循環(huán)：

代碼示例：

3. Location 對象

用法：

常用屬性和方法：

代碼示例：

4. Navigator 對象

用法：

常用屬性和方法：

代碼示例：

5. History 對象

用法：

常用屬性和方法：

代碼示例：

6. 本地存儲（Local Storage）

用法：

常用方法：

代碼示例：

結(jié)論

更多精彩內(nèi)容，請持續(xù)關(guān)注！

您的項目需求