h5 本地存储会话存储历史记录音视频拖拽线程 BOM

最新推荐文章于 2022-09-29 16:14:14 发布

e神还是心头好

最新推荐文章于 2022-09-29 16:14:14 发布

阅读量239

点赞数

分类专栏： html css

本文链接：https://blog.csdn.net/weixin_43606967/article/details/117981534

版权

html css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1. 本地存储：localStorage

2. 会话存储 sessionStorage

8 BOM Browser Object Model）浏览器对象模型

1. 本地存储：localStorage

存储数据：localStorage.setItem(key, value)

读取数据：localStorage.getItem(key)

删除某一项数据：localStorage.removeItem(key)

删除全部数据：localStorage.clear()

key：表示数据名称，是一个字符串，value: 要存储的数据（默认转为字符串）

可以使用对象的点语法，中括号，去添加数据

定义对象：

// 定义对象
        var obj = {
            width: 100,
            height: 200
        }

        // 存储对象之前先转为字符串
        localStorage.obj2 = JSON.stringify(obj);

        // 读取对象  再次转为原类型
        console.log(JSON.parse(localStorage.obj2).width);

定义函数：

 function demo() {
        console.log('success');
        }
        // 可以不使用JSON内置对象处理，因为JSON内置对象 无法处理函数
        localStorage.demo = JSON.stringify(demo);

        // 直接存储
        localStorage.fn = demo;

        // 读取函数 之后仍然的到的是字符串
        console.log(localStorage.fn);

        // 可以通过两个方式来处理:
        //     1 eval
        //     2 new Function

        // eval处理的数据 是一个全局变量
        eval(localStorage.fn);

        // new Function执行之后得到的一个局部变量
        var fn = new Function('return ' + localStorage.fn)();
        console.log(fn());

2. 会话存储 sessionStorage

它与本地存储之间的区别就是生命周期的区别

本地存储的生命周期是永久的，浏览器不卸载就在

会话存储的生命周期是从页面打开到页面关闭。

与全局变量的区别是

会话存储可以刷新页面

全局变量不能刷新页面

生命周期长度：本地存储 > 会话存储 > 全局变量

3. 历史记录

history.forward 等于history.go(1)；加载历史记录列表中的上一个URL

history.back 等于history.go(-1)；加载历史记录列表中的下一个URL

history.pushState(obj, title, url)：该方法用于向历史记录中添加新的历史记录（注：状态改变不需要刷新页面）

history.replaceState (obj, title, url)：该方法用于替换当前的历史记录

obj: 添加的数据是一个对象

title: 新的网页标题一般省略

url: 新的网页的url

window.onpopstate事件：该事件可以监听replaceState方法的执行以及页面的切换。

4. 音视频 audio video

常用API

play 播放； audio.play();

pause 暂停；  audio.pause();

duration 总时长； audio.duration;

currentTime 当前时长；   audio.currentTime

volume 音量（0-1之间的数）；  audio.volume = 0.5；

muted 静音； audio.muted = true;静音  audio.muted = false;不静音

5. 拖拽

ondrag: 拖拽，高频事件

ondragenter: 拖拽进入（原位置）

ondragleave: 拖拽离开（原位置）

ondragstart: 拖拽开始

ondragend: 拖拽结束

ondragover：悬浮，高频事件

ondrop: 丢弃事件。必须要给该元素添加ondragover事件并阻止默认事件

6 worker

该方法用于开辟一个额外的线程。其使用方式：

1 将要大量计算的代码提取到一个js文件中

2 要初始化Worker函数

var worker = new Worker(path)

path: 要提取出来的js文件

特点：需要服务器环境支持

当页面打开的时候直接可以看到，在额外的线程执行完毕之后，其它语句已经执行

7 线程通信

postMessage 该方法用于将额外线程中的数据推送到主线程中

onmessage 该方法用于主线程接收额外的线程推送过来的信息

// 接收数据
    wk.onmessage = function(e) {
        console.log(e)
        // 具体的数据在e.data中
        console.log(e.data);
    }

8 BOM Browser Object Model）浏览器对象模型

1 location 对象

用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

　　location.herf = 'url地址'

　　location.hostname 返回 web 主机的域名

　　location.pathname 返回当前页面的路径和文件名

　　location.port 返回 web 主机的端口（80 或 443）

　　location.portocol 返回页面使用的web协议。 http:或https:

2 navigator 对象