BOM操作 +本地存储

最新推荐文章于 2024-07-14 12:56:18 发布

你想要那颗糖

最新推荐文章于 2024-07-14 12:56:18 发布

阅读量148

点赞数 1

分类专栏： JavaScript 文章标签： javascript 前端 html5

本文链接：https://blog.csdn.net/qq_50260510/article/details/129924585

版权

JavaScript 专栏收录该内容

61 篇文章 2 订阅

订阅专栏

JavaScript的组成

1. ECMAScript: 规定了js基础语法核心知识。比如：变量、分支语句、循环语句、对象等等

2.Web APIs :

（1）DOM 文档对象模型，定义了一套操作 HTML文档的API

（2）BOM 浏览器对象模型，定义了一套操作浏览器窗口的API

一、BOM

BOM (Browser Object Model ) 是浏览器对象模型

window对象是一个全局对象，也可以说是JavaScript中的顶级对象；像document、alert()、console.log()这些都是window的属性，基本BOM的属性和方法都是window的

所有通过 var定义在全局作用域中的变量、函数都会变成window对象的属性和方法

window对象下的属性和方法调用的时候可以省略window

1.2 location对象

1.location (地址) 它拆分并保存了 URL 地址的各个组成部分，它是一个对象

2.location 的常用属性

1.3 navigator对象

navigator 是对象，该对象下记录了浏览器自身的相关信息

1.4 histroy对象

1.history (历史)是对象，主要管理历史记录，该对象与浏览器地址栏的操作相对应，如前进、后退等

2. 使用场景： history 对象一般在实际开发中比较少用，但是会在一些 OA 办公系统中见到。

3. history 的常见方法

二、本地储存

2.1 localStorage

1.作用: 数据可以长期保留在本地浏览器中，刷新页面和关闭页面，数据也不会丢失

2.特性：以键值对的形式存储，并且存储的是字符串，省略了window

3.语法：

（1）存储：localStorage. setItem (key, value)

（2）获取：localStorage. getItem (key)

（3）删除：localStorage. removeItem (key )

2.2 sessionStorage

1.sessionStorage 的用法跟 localStorage 基本相同；区别是：当页面浏览器被关闭时，存储在 sessionStorage 的数据会被清除

2.用法：

（1）存储：sessionStorage. setItem (key, value)

（2）获取：sessionStorage. getItem (key)

（3）删除：sessionStorage. removeItem (key)

2.3 localStorage 存储复杂数据类型

1.存储 localStorage.setItem('新名称' , JSON.stringify(要存入的数组/对象))

问题：本地只能存储字符串,无法存储复杂数据类型

解决：需要将复杂数据类型转换成 JSON字符串,在存储到本地

语法：JSON.stringify(复杂数据类型) 将复杂数据转换成JSON字符串存储本地存储中

JSON字符串：首先是1个字符串；属性名使用双引号引起来，不能单引号；属性值如果是字符串型也必须双引号

2.读取：JSON.parse(localStorage.getItem('存入时定义的新名称'))

解决：把取出来的字符串转换为对象

语法：JSON.parse(JSON字符串) 将JSON字符串转换成对象取出时候使用

本地储存和读取的案例分享：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>本地存取</title>
</head>
<body>
    <script>
        // 本地存储复杂数据类型
        const goods = {
        name:'huawei',
        price: 5999
    }

    // 1. 把对象转换为JSON字符串  JSON.stringify
    localStorage.setItem('goods' , JSON.stringify(goods))
    console.log(localStorage.getItem('goods'));

    // 2. 把JSON字符串转换为对象  JSON.parse
    console.log(JSON.parse(localStorage.getItem('goods')))



    </script>
    
</body>
</html>

效果展示：