只讀的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 對象以及本地存儲。
BOM 全稱為瀏覽器對象模型(Browser Object Model),它提供了與瀏覽器互動的各種接口和方法。通過 BOM,開發者可以訪問和操作瀏覽器窗口、文檔、歷史記錄等。BOM 的核心對象是 Window 對象。
// 設置窗口的高度和寬度
window.innerHeight=800;
window.innerWidth=1200;
// 打開一個新窗口
let newWindow=window.open('https://www.example.com', '_blank');
JavaScript 代碼在瀏覽器中的執行機制主要包括兩個方面:事件循環和回調隊列。
事件循環(Event Loop)是 JavaScript 的執行模型,它確保非阻塞操作能夠正常執行。
console.log('任務開始');
setTimeout(()=> {
console.log('異步任務');
}, 2000);
console.log('任務結束');
執行順序為:
Location 對象包含有關當前 URL 的信息,并提供了一些重定向和導航的方法。
// 獲取當前 URL
console.log(location.href);
// 重定向到新的 URL
location.href='https://www.new-url.com';
// 重新加載當前頁面
location.reload();
Navigator 對象包含有關瀏覽器的信息,如瀏覽器名稱、版本、以及用戶代理信息。
// 獲取用戶代理信息
console.log(navigator.userAgent);
// 獲取用戶地理位置
navigator.geolocation.getCurrentPosition((position)=> {
console.log(`Latitude: ${position.coords.latitude}, Longitude: ${position.coords.longitude}`);
});
History 對象允許操作瀏覽器的歷史記錄(會話歷史)。
// 返回上一個頁面
history.back();
// 前進到下一個頁面
history.forward();
// 前往歷史記錄中的第一個頁面
history.go(-1);
本地存儲是一種在客戶端存儲數據的方式,數據存儲在瀏覽器中,不會隨頁面刷新而丟失。
// 存儲數據
localStorage.setItem('username', 'john_doe');
// 獲取數據
let username=localStorage.getItem('username');
console.log(username); // 輸出: john_doe
// 刪除數據
localStorage.removeItem('username');
// 清空所有數據
localStorage.clear();
通過對這些對象和機制的深入了解,你可以更好地利用 JavaScript 提供的各種功能來優化用戶體驗,增強應用程序的互動性。無論是控制瀏覽器窗口、獲取用戶信息,還是操作歷史記錄和本地存儲,掌握這些知識都會讓你的開發工作事半功倍。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。