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>
效果展示: