BOM对象,localstorage与sessionstorage储存页面数据的区别以及JSON数据类型的转换方法小结

最新推荐文章于 2022-12-07 14:15:21 发布

码少女壮士

最新推荐文章于 2022-12-07 14:15:21 发布

阅读量560

点赞数

文章标签： json javascript 前端

本文链接：https://blog.csdn.net/weixin_40630195/article/details/122224681

版权

01-localstorage与sessionstorage

1.1-localstorage

1.localStorage:本地存储

将数据存储到浏览器

2.语法

存： localStorage.setItem(‘属性名’,‘属性值’)

取： localStorage.getItem(‘属性名’)

删： localStorage.removeItem(‘属性名’)

清空： localStorage.clear()

3.注意点

a.存储的数据只能是字符串类型。如果是其他数据类型则会自动调用toString()方法转成字符串

b.永久存储。除非自己删，否则一直存在于浏览器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kMHdS5sg-1640783061985)(day05.assets/1558023490379.png)]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <button id="btn1">存储据</button>
    <button id="btn2">取储据</button>
    <button id="btn3">删储据</button>
    <button id="btn4">清空储据</button>

    <script>
        /* 
            1.localStorage:本地存储
                将数据存储到浏览器

            2.语法
                存：  localStorage.setItem('属性名','属性值')
                取：  localStorage.getItem('属性名')
                删：  localStorage.removeItem('属性名')
                清空： localStorage.clear()

            3.注意点
                a.存储的数据只能是字符串类型。如果是其他数据类型则会自动调用toString()方法转成字符串
                b.永久存储。除非自己删，否则一直存在于浏览器
         */


        //存
        document.getElementById('btn1').onclick = function(){
            localStorage.setItem('name','班长');
            localStorage.setItem('age',18);
            localStorage.setItem('girlFriend',['苍老师','波多老师','吉泽老师']);
        }

        //取
        document.getElementById('btn2').onclick = function(){
            let age = localStorage.getItem('age');
            console.log(age); 
        }

        //删
        document.getElementById('btn3').onclick = function(){
            localStorage.removeItem('girlFriend'); 
        }

        //清空:一次性删除所有数据
        document.getElementById('btn4').onclick = function(){
            localStorage.clear(); 
        }
    </script>
</body>
</html>

1.2-sessionStorage

1.sessionStorage相当于短命版的localStorage，其他用法完全一致

2.两者区别：HP值不同

localStorage：永久存储（存在硬盘，HP值无限）

sessionStorage：临时存储（存在内存，HP值一条命，只要浏览器关闭就没有了）

02-localStorage如何存储对象类型数据

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <button class="btn1">点我存储</button>
    <button class="btn2">点我读取</button>
    <script>
      /* 
        1.localStorage如何存储对象类型数据： 使用JSON格式字符串

        2.JSON对象是什么 ： 本质是一种字符串格式
            '{"name":"admin","password","123456"}'
        3.JSON对象作用： 解决跨平台兼容性
            * 实际开发中，我们的数据来源于服务器。 而服务器并不一定是用js语言开发的，例如python、java、c++等，
            不同的编程语句数据类型是不一样的。为了解决这个问题，人们发明了一种所有编程之言都支持的格式，就是JSON格式对象。 json格式本质是一个字符串，里面所有的数据都要用双引号包起来
        4.JSON与js互转
            4.1 json转js : JSON.parse(json对象)
            4.2 js转json :  JSON.stringify(js对象)
         */

      let json = '{"name":"admin","password":"123456"}'
      console.log(JSON.parse(json))

      let js = { name: 'admin', password: 123456 }
      console.log(JSON.stringify(js))

      document.querySelector('.btn1').onclick = function () {
        //存储： 将js对象转成json格式字符串
        localStorage.setItem('user', JSON.stringify(js))
      }

      document.querySelector('.btn2').onclick = function () {
        //读取： 将读取到的json格式字符串转成对象
        //1.先读取json格式
        let json = localStorage.getItem('user')
        //2.然后转成js对象
        let js = JSON.parse(json)
        console.log(js)
      }
    </script>
  </body>
</html>

03-bom对象学习总结

bom对象
1，windows对象
- 指的是当前浏览器窗口，它是JS中的顶级对象
- 1.特点
  - (1).所有的全局变量都是window对象的属性：最顶级的对象
  - (2).只要是window的属性和方法，在使用的时候都可以省略window
    - window.alert() 可以省略window写成alert()
    - window.document 可以省略window写成document
  - (3).window对象有一个特殊属性叫做name，它永远都是一个字符串，无论给他赋什么值
- 2.两个常用方法
  - open()：打开一个新窗口
    - window.open('https://www.baidu.com', '_blank', 'top=100,left=100,width=500,height=300', true );
  - close()：关闭一个窗口
    - window.close(要关闭的window对象)
    - 野路子，自己关闭自己:window.open(" ","_self").close();
- 3.三个事件
  - window.onload:界面上所有的内容加载完毕之后才触发这个事件
  - window.onbeforeunload:界面在关闭之前会触发这个事件
  - window.onunload:界面在关闭的那一瞬间会触发这个事件
2.location对象
- location对象：包含当前页面的URL信息
  - url = 协议名（http） + ip地址（域名） + 端口号 + 资源路径
  - 暂时只需要知道location对象包含一个网页的网络url信息即可，具体的含义将在后面阶段学习网络的时候详细讲解
- 一些属性
  - location.hash
    - 资源定位符（锚点定位）
  - location.host
    - 主机 host = hostname + port
  - location.hostname
    - 主机名（ip地址）
  - location.port
    - 端口号
  - location.href
    - 完整的url路径
  - location.pathname
    - 资源路径
  - location.protocol
    - url的协议
  - location.search
    - url请求的参数
- 三个常用方法
  - window.location.assign(’
    
    http://www.baidu.com
    
    ');
    - 打开新网页，会留下历史记录（可以回退）
  - window.location.replace(’
    
    http://www.baidu.com
    
    ');
    - 打开新网页，不会留下历史记录（不能回退）
  - window.location.reload();
    - 刷新当前网页,相当于按了F5刷新当前网页
3.history对象
- history对象主要用于记录你当前窗口的历史记录
- 主要作用就是前进和后退网页（相当于浏览器的左上角前进后退按钮功能）
  - history.forword():前进
  - history.back():后退
4.navigator对象
- navigator对象：包含当前浏览器的信息
- 工作中应用场景：用户信息统计（统计我这个网站平台的用户群体分布，什么浏览器，windows什么版本等）
- navigator.appVersion 当前浏览器版本信息
- navigator.platform 当前浏览器的硬件平台
- navigator.userAgent 当前浏览器信息
5.screen对象
- 非常的不常用，获取电脑屏幕像素
  - console.log(screen.width);//1920
  - console.log(screen.height);//1080

码少女壮士

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
BOM对象,localstorage与sessionstorage储存页面数据的区别以及JSON数据类型的转换方法小结

BOM对象,localstorage与sessionstorage储存页面数据的区别以及JSON数据类型的转换方法
复制链接

扫一扫