js-BOM

最新推荐文章于 2024-07-08 16:22:29 发布

xiao奥

最新推荐文章于 2024-07-08 16:22:29 发布

阅读量103

点赞数 1

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/liangaoyun/article/details/122028050

版权

localStorage和sessionStorage的区别？

localStorage存储对象

window对象

window对象是sj中的顶级对象。所有全局函数、全局属性都是window对象的成员(属性+方法)
只要是window对象的成员在使用时可以省略window
window对象有一些特殊的属性不能被覆盖.例如top不能作为全局变量名

1.window对象两个方法：

打开新窗口：window.open()

关闭新窗口：window.close()

<!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>Document</title>
</head>
<body>
  <button class="btn1">点击打开窗口</button>
  <button class="btn2">点击关闭窗口</button>
  <script>
    // 打开窗口
    document.querySelector('.btn1').onclick = function () {
    
      window.open('http://www.jd.com', '.blank', 'left= 300,top = 100,width = 400,height=300')
    }

    // 关闭窗口
    document.querySelector('.btn2').onclick = function () {
      window.close()
    }
  </script>
</body>

</html>

2.window对象事件

onload事件： dom树+外部资源加载完毕后执行

<!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>
    <script>
        // onload事件： dom树 + 外部资源 加载完毕后执行
        window.onload = function(){
            console.log('dom树 + 外部资源，加载完毕后执行')
            //dom树加载完毕，才可以获取box
            let box = document.querySelector('.box')
            //外部资源加载完毕，才可以拿到图片的尺寸
            console.log( box.scrollWidth ,box.scrollHeight )//1200 675
        }
    </script>
</head>
<body>
    
    <div class="box" style="width: 100px;height: 100px;background-color: red">
        <img src="./01.jpg" alt="">
    </div>
    <script>
        /* 
        window对象事件
            1. window.onload事件 ：dom树 + 外部资源 加载完成后执行
            2. window.onbeforeunload事件 ：页面关闭之前执行
            3. window.onunload事件  ：页面正在关闭
        */       
    </script>
</body>
</html>

3.location对象

location : 网址栏 url
1.使用最多的属性(网页跳转)： location.href
2.location对象三个方法 :
location.assign() : 跳转网页。作用与location.href一致
location.replace() : 替换网页。使用较少，因为替换后不能返回
location.reload() : 刷新网页。一般用于移动端

<!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="assign">assign 跳转网页</button>
    <button class="replace">replace 替换网页</button>
    <button class="reload">reload 刷新网页</button>
    <a href="http://www.baidu.com">点我跳转</a><br>
    <input class="username" type="text" placeholder="请输入账号"><br>
    <input class="password" type="text" placeholder="请输入密码"><br>
    <button>点我登录</button>

    <script>
        /*  location : 网址栏  url
            1.使用最多的属性(网页跳转)： location.href
            2.location对象三个方法 : 
                location.assign() : 跳转网页。  作用与location.href一致
                location.replace() : 替换网页。  使用较少，因为替换后不能返回
                location.reload() :  刷新网页。  一般用于移动端
        */ 
       
        console.log( window.location )

        //1.location对象使用最多的属性 href
        console.log( location.href )
        //作用： 跳转网页
        // location.href = 'http://www.baidu.com'

        document.querySelector('button').onclick = function(){
            let username = document.querySelector('.username').value
            let password = document.querySelector('.password').value
            if( username == 'admin' && password =='123456' ){
                window.location.href = 'http://www.baidu.com'
            }else{
                alert('用户名或密码错误')
            }
        }
        //2.获取域名
        console.log( location.hostname )//域名  网址的身份证
        //3.获取参数
        console.log( location.search )//网络参数
        
        document.querySelector('.assign').onclick = function(){
            //跳转： 与location.href 一模一样。 只是写法不同
            location.assign('http://www.baidu.com')
        }
        document.querySelector('.replace').onclick = function(){
            //替换网页 ： 无法回退
            location.replace('http://www.baidu.com')
        }
        document.querySelector('.reload').onclick = function(){
            //刷新网页： 相当于F5
            location.reload()
        }
    </script>
</body>
</html>

4. history对象

history : 历史记录

history三个方法：

history.back() : 返回上一页等价于 history.go(-1)

history.forward() : 前进下一页等价于 history.go(1)

history.go( 数字 ) : 到历史记录的具体哪一页

正数：前进 1：前进1页 2：前进2页

负数：回退 -1：回退1页 -2：回退2页

<!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>
    <script>
        /* 
        history : 历史记录
        history三个方法：
            history.back() : 返回上一页     等价于  history.go(-1)
            history.forward() : 前进下一页     等价于  history.go(1)
            history.go( 数字 ) : 到历史记录的具体哪一页
                正数： 前进    1：前进1页   2：前进2页   
                负数： 回退    -1：回退1页  -2：回退2页
        */
        console.log(history)
        console.log(history.length)//几条历史记录

    </script>
</body>

</html>

5.navigator对象

navigator : 浏览器信息对象

作用：收集用户信息

  console.log( navigator )
        console.log( navigator.userAgent )//用户代理： 浏览器型号，内核。 计算机操作系统型号

6.screen对象

screen对象：获取用户电脑分辨率

  console.log( screen )  //获取用户电脑分辨率

存储对象storage

localStorage对象作用 : 存储数据
经典应用：免登录

localStorage语法 :

存数据： localStorage.setItem('属性名',属性值)
取数据: localStorage.getItem('属性名')
删数据: localStorage.removeItem('属性名')
清空数据: localStorage.clear()

localStorage注意点 :
永久存储：除非手动清除，否则一直存在
只能存储字符串类型,如果存储其他类型，编译器会自动toString()转成字符串来存储

<!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">setItem</button>
    <button class="btn2">getItem</button>
    <button class="btn3">removeItem</button>
    <button class="btn4">clear</button>
    <script>
        //存数据：  localStorage.setItem('属性名',属性值)
         document.querySelector('.btn1').onclick = function(){
             localStorage.setItem('username','admin')
             localStorage.setItem('password','123456')
             localStorage.setItem('gender','男')
             localStorage.setItem('nickname',[10,20,30])
         }

         //取数据:   localStorage.getItem('属性名')
         document.querySelector('.btn2').onclick = function(){
             let uname = localStorage.getItem('username')
             let pword = localStorage.getItem('password')
             console.log(uname,pword)
         }

         //删数据:   localStorage.removeItem('属性名')
         document.querySelector('.btn3').onclick = function(){
             localStorage.removeItem('gender')
         }

         //清空数据: localStorage.clear()
         document.querySelector('.btn4').onclick = function(){
             localStorage.clear()
         }
         
    </script>
</body>
</html>

sessionStorage对象

sessionStorage对象作用 : 存储数据

sessionStorage语法 :
  存数据： sessionStorage.setItem('属性名',属性值)
  取数据: sessionStorage.getItem('属性名')
  删数据: sessionStorage.removeItem('属性名')
  清空数据: sessionStorage.clear()

sessionStorage注意点 :
临时存储：只要页面关闭了，就自动清除了
只能存储字符串类型,如果存储其他类型，编译器会自动toString()转成字符串来存储

<!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">setItem</button>
    <button class="btn2">getItem</button>
    <button class="btn3">removeItem</button>
    <button class="btn4">clear</button>
    <script>
        //存数据：  sessionStorage.setItem('属性名',属性值)
         document.querySelector('.btn1').onclick = function(){
             sessionStorage.setItem('username','admin')
             sessionStorage.setItem('password','123456')
             sessionStorage.setItem('gender','男')
             sessionStorage.setItem('nickname',[10,20,30])
         }
         //取数据:   sessionStorage.getItem('属性名')
         document.querySelector('.btn2').onclick = function(){
             let uname = sessionStorage.getItem('username')
             let pword = sessionStorage.getItem('password')
             console.log(uname,pword)
         }
         //删数据:   sessionStorage.removeItem('属性名')
         document.querySelector('.btn3').onclick = function(){
             sessionStorage.removeItem('gender')
         }
         //清空数据: sessionStorage.clear()
         document.querySelector('.btn4').onclick = function(){
             sessionStorage.clear()
         }
    </script>
</body>
</html>

localStorage和sessionStorage的区别？

1、localStorage和sessionStorage的区别？
相同点：作用相同，都是存储数据
不同点：存储方式不同
localStorage : 硬盘存储（永久存储）
* 应用场景：免登录
sessionStorage : 内存存储（临时存储）
* 应用场景：页面间传值

2、localStorage和sessionStorage在用的时候有什么注意点吗？
* 只能存储字符串类型数据，如果存储其他类型则编译器自动调用toString()转成字符串
3、如何解决storage存储对象只能存储字符串问题？（如何存储引用类型）
* 使用json格式存储

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>
    <h1>localStorage存储对象类型</h1>
    <button class="btn1">存对象</button>
    <button class="btn2">取对象</button>
    <script>
        let obj = { 
            name:'ikun'
            ,gfs:['学生','上课','敲代码']
        }
        //存对象 : js->json
        document.querySelector('.btn1').onclick = function(){
            //1.先把js对象转成json格式
            // let json =  JSON.stringify( obj )
            //2.json存入localStorage
            // localStorage.setItem( 'user',json )

            localStorage.setItem( 'user',JSON.stringify( obj ) )
        }
        //取对象 : json->js
        document.querySelector('.btn2').onclick = function(){
            //1.先取出json格式字符串
            // let json = localStorage.getItem('user')
            //2.把取出来的json -> js
            // let js =  JSON.parse( json )
            let js =  JSON.parse( localStorage.getItem('user') )
            console.log( js )
        }
    </script>
</body>
</html>

xiao奥

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js-BOM

目录window对象1.window对象两个方法：2.window对象事件3.location对象4.history对象 5.navigator对象6.screen对象存储对象storagelocalStorage语法 :sessionStorage对象localStorage和sessionStorage的区别？localStorage存储对象window对象window对象是sj中的顶级对象。所有全局函数、全局属性都是window对象的成..
复制链接

扫一扫