indow.localStorage 介紹

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

localStorage 類似 sessionStorage，但其區別在于：存儲在 localStorage 的數據可以長期保留；而當頁面會話結束——也就是說，當頁面被關閉時，存儲在 sessionStorage 的數據會被清除 。

測試樣例

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

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

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

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

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

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

對象有關系的內存空間：

①棧空間

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

②堆空間

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

③數據空間

該空間存放常量、類的靜態屬性

④代碼空間

存放函數體代碼、方法體代碼

言

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

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

什么是 BOM？

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

代碼示例：

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

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

2. JavaScript 執行機制

JavaScript 代碼在瀏覽器中的執行機制主要包括兩個方面：事件循環和回調隊列。

事件循環：

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

代碼示例：

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

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

console.log('任務結束');

執行順序為：

1. 任務開始
2. 任務結束
3. 異步任務（2秒后輸出）

3. Location 對象

用法：

Location 對象包含有關當前 URL 的信息，并提供了一些重定向和導航的方法。

常用屬性和方法：

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

代碼示例：

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

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

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

4. Navigator 對象

用法：

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

常用屬性和方法：

• 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()：前進到下一頁
• history.go(n)：加載歷史記錄中的某個特定頁面

代碼示例：

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

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

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

6. 本地存儲（Local Storage）

用法：

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

常用方法：

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

代碼示例：

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

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

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

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

結論

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

更多精彩內容，請持續關注！