本地存储

longfan_

已于 2022-06-06 19:40:16 修改

阅读量248

点赞数

文章标签：前端

于 2022-04-12 19:08:10 首次发布

本文链接：https://blog.csdn.net/longfan_/article/details/124122823

版权

1.window对象

1.window对象（浏览器窗口）

1. window对象三个特点：

// (1)window是js中的顶级对象，所有的全局函数，全局变量都是window对象的成员

// (2)只要是window对象的成员，使用时都可以省略window

// (3)window中有一个属性top，不可以作为变量名

2.window对象两个方法：

// 打开窗口：window.open()

// 关闭窗口：window.close()

// 打开
        document.querySelector('.btn1').addEventListener('click',function(){
            // 第一个参数：url网址
            // 第二个参数：a标签target  默认_blank(新窗口)  当前页面 _self
            // 第三个参数：新窗口样式
            // 第四个参数：是否放入历史记录
            window.open('http://www.baidu.com','_blnak','left-200,top-200,width-300,height-300')
        })
        // 关闭
        document.querySelector('.btn2').addEventListener('click',function(){
            window.close()
        })

3.window对象两个事件

//(1)window.onload :DOM树 + 外部资源路径加载完毕之后执行

window.addEventListener('load',function(){
            window.addEventListener('load',function(){
                let box=document.querySelector('.box')
                console.log(box)
            })
        })

// (2)window.onbeforeunload: 页面关闭之前执行

window.addEventListener('beforeunload',function(){
            console.log('页面关闭之前')
            // 利用存储数据
        })

2.location对象

// locaiton:网页地址栏

// location三个方法

// (1)location.assign('url')：跳转页面

// 等价写法：location.href='url'

// (2)location.replace('url')替换网页(无法返回)

// (3)location.reload()：刷新页面(一般用于移动端)

// 1.href属性：完整的url网址
        // 作用：实现网页跳转
        // location.href='http://www.baidu.com'

        // 2.hostname 主机名/域名/IP

        // location.assign()跳转网页
        document.querySelector('.assign').addEventListener('click',function(){
            // assign()方法与location.href()完全等价
            location.assign('http://www.baidu.com')
        })

        // location.replace()替换网页
        document.querySelector('.replace').addEventListener('click',function(){
            location.replace('http://www.baidu.com')
        })

        // location.reload()：刷新页面
        document.querySelector('.reload').addEventListener('click',function(){
            // 刷新
            location.reload()
        })

3.history对象

// history对象：历史记录

// 三个方法：

// history.back()：返回上一页

// history.forward():前进下一页

// history.go():跳转指定历史记录

// 0:刷新

// 负数：返回 -1：返回一页 -2：返回两页

// 正数：前进 1：前进一页 2：前进两页

4.navigator对象

navigator对象：浏览器对象

作用：收集用户数据

<script>
        console.log(window.navigator)
        console.log(navigator.userAgent) //获取 操作系统 浏览器版本
</script>

5.screen对象

<script>
        /* 
        screen对象：获取用户电脑屏幕大小 */
        console.log(screen)
    </script>

6.定时器

setTimeout():一次定时器间隔时间内只会执行一次，完毕后自动清除

开启：let timeID=setTimeout(function(){},时间间隔)

清除定时器：clearTimeout(timeID)

// 开启定时器
        let timeID=setTimeout(function(){
            console.log('hi')
        },3000)

// 清除定时器
        document.querySelector('.btn').addEventListener('click',function(){
            clearTimeout(timeID)
        })

2.本地存储

1.localStorage存储对象类型

1.localStorage作用：本地存储

经典场景：免登录

2.localStorage语法：

2.1 存数据：localStorage.setItem('属性名'，属性值)

2.2 取数据：localStorage.getItem('属性名')

2.3 删数据：localStorage.removeItem('属性名')

2.4 清空数据：localStorage.clear()

3.localStorage注意点：

(1)永久存储只能手动清除一直存在

(2)只能存储字符串类型数据，如果是其他类型会自动转换为字符串

2.sessionStorage存储对象类型

1.sessionStorage作用：本地存储

经典场景：免登录

2.sessionStorage语法：

2.1 存数据：sessionStorage.setItem('属性名'，属性值)

2.2 取数据：sessionStorage.getItem('属性名')

2.3 删数据：sessionStorage.removeItem('属性名')

2.4 清空数据：sessionStorage.clear()

3.sessionStorage注意点：

(1)临时存储，只要页面关闭，就会自动清除

(2)只能存储字符串类型数据，如果是其他类型会自动转换为字符串

必问面试题：localStorage与sessionStorage区别

相同点：

(1)功能相同，都是存储数据

(2)都有大小限制，一般浏览器上限5MB

不同点：

(1)存储方式不同

(2)localStorage：硬盘存储

(3)sessionStorage：内存存储

3.存储复杂数据类型

1.JSON是什么：JSON是一种数据格式，本质是字符串

2.JSON作用：数据跨平台传输

3.JSON语法：

⚫ 解决：需要将复杂数据类型转换成JSON字符串,在存储到本地

JSON->js: let js=JSON.parse(json字符串)

⚫ 解决：把取出来的字符串转换为对象

js->JSON: let json=JSON.stringify(js对象)

<button class="btn1">存数据</button>
    <button class="btn2">取数据</button>
    <script>
        /* 存数据类型数据
        1.存：先转json后存 js->json
        2.取：先取json后存 json->js*/

        let arr=[
            {name:'张三',age:20},
            {name:'李四',age:30},
            {name:'王五',age:40}
        ]

        // 存：js->json
        document.querySelector('.btn1').addEventListener('click',function(){
            // (1)先把js转为json：js->json
            // let json=JSON.stringify(arr)
            // console.log(json)
            // (2)存入localStorage
            // localStorage.setItem('user',json)

            // 先转json后cun
            localStorage.setItem('user',JSON.stringify(arr))
        })

        // 取：json->js
        document.querySelector('.btn2').addEventListener('click',function(){
            // (1)先取出json
            let json=localStorage.getItem('user')
            console.log(json)
            // (2)后json->js
            let js=JSON.parse(json)
            console.log(js)
        })
    </script>