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 提供的各种功能来优化用户体验，增强应用程序的互动性。无论是控制浏览器窗口、获取用户信息，还是操作历史记录和本地存储，掌握这些知识都会让你的开发工作事半功倍。

更多精彩内容，请持续关注！