h5学习记录-

郑立峰

于 2020-11-30 17:31:03 发布

阅读量133

点赞数

分类专栏： react es6 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44070105/article/details/110392648

版权

es6 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

react

5 篇文章 0 订阅

订阅专栏

这篇博客探讨了如何在HTML5中实现元素全屏操作，特别是针对视频元素的全屏兼容处理。同时，文章详细介绍了浏览器的localStorage和sessionStorage机制，用于本地数据存储，并提供了设置和获取存储数据的示例函数。这些技术对于前端开发人员在创建交互式网页和管理用户数据时非常有用。

摘要由CSDN通过智能技术生成

html 全屏某个元素
html 5 浏览器本地储存（浏览器本地数据库）

localStorage //浏览器本地数组存储，可以将数据永久保存在客户端。
sessionStorage // 关闭浏览器之后数据清除


// 设置 因为localStorage只能设置字符串 所以把对象转成JSON字符串用来达到保存多样数据的目的 
export const setStorage = (key: string, storage: any = {}) => {

  localStorage.setItem(key, JSON.stringify(storage))
}

// 获取
export const getStorage = (key: string) => {
  try { 
    return JSON.parse(localStorage.getItem(key) || '')
  } catch (error) {
    console.log('获取本地缓存失败');
  } 
}

元素全屏

在这里插入代码片
const videoDom = document.getElementById('img')
//全屏 浏览器中兼容函数
toFullVideo(){

  if(videoDom.requestFullscreen){

    return videoDom.requestFullscreen();

  }else if(videoDom.webkitRequestFullScreen){

    return videoDom.webkitRequestFullScreen();

  }else if(videoDom.mozRequestFullScreen){

    return videoDom.mozRequestFullScreen();

  }else{ 
    return videoDom.msRequestFullscreen(); 
  }

}