40.本地存储

最新推荐文章于 2024-05-14 22:15:27 发布

Suyuoa

最新推荐文章于 2024-05-14 22:15:27 发布

阅读量2.5k

点赞数

分类专栏： JavaScript笔记文章标签：前端 javascript

本文链接：https://blog.csdn.net/potato123232/article/details/126638786

版权

JavaScript笔记专栏收录该内容

69 篇文章 5 订阅

订阅专栏

本地存储可以把数据存在浏览器中，减少用户与服务器的交互

有sessionStorage与localStorage两种方式可以本地存储数据，sessionStorage容量约5M，localStorage容量约20M

本地存储只能存储字符串，可以将对象JSON.stringify()编码后存储

1 window.sessionStorage

1.1 存储(更改)数据 sessionStorage.setItem()

1.2 获取数据sessionStorage.getItem()

1.3 删除数据 sessionStorage.removeItem()

1.4 清空所有数据 sessionStorage.clear()

2 window.localStorage

2.1 存储(更改)数据 localStorage.setItem()

2.2 获取数据 localStorage.getItem()

2.3 删除数据 localStorage.removeItem()

2.4 清空所有数据 localStorage.clear()

3 记住用户名案例

1 window.sessionStorage

当关闭页面后sessionStorage存储的数据消失，以键值对的形式存储使用

我们在这里介绍四个方法，存储(更改)，取出，删除，清空所有数据

1.1 存储(更改)数据 sessionStorage.setItem()

语法是这样的

我们简单写一下

存储之后打开网页，可以在Application的Storage的session Storage找到我们刚刚存储的数据

刷新页面后数据同样存在

更改的方式与存储相同，我们对着相同的key存储不同的value就可以了

我们搞一个按钮用于更改

打开后是这样的

点击一下按钮发现更改了数据

1.2 获取数据sessionStorage.getItem()

语法是这样的

我们简单用一下

这样就能获取到数据了

如果没有这个指定的键就会获取到null

1.3 删除数据 sessionStorage.removeItem()

语法是这样的

我们搞一个按钮来删除数据

打开后发现是有数据的

点击一下按钮数据消失了

1.4 清空所有数据 sessionStorage.clear()

这个什么参数都不用给，我们简单用一下

打开后是这样的，存储了两组数据

点击一下按钮，发现两组数据没了

2 window.localStorage

localStorage的数据除非手动删除，否则永久保存(浏览器关闭后也会保存)。同一个站点可以共享localStorage中的数据(比如你自己在你的站点中存了一个数据，你去百度中是没有你存的数据的)(不同浏览器可能会有区别)。以键值对的方式存储

使用方式与sessionStorage的使用方式一致

2.1 存储(更改)数据 localStorage.setItem()

语法是这样的

打开页面后可以在Application中的Local Storage中看到我们刚刚存储的数据

2.2 获取数据 localStorage.getItem()

我们关闭之前存储的页面，之后再打开读取的页面(注意我在读取页面中只读取，没保存)

发现可以拿到之前存储的数据

如果没获取到指定的键就会获取到null，在下面的例子中会提到

2.3 删除数据 localStorage.removeItem()

打开之后可以发现我们之前存储的数据

点击一下按钮后数据消失

2.4 清空所有数据 localStorage.clear()

清空之前我们再存储一遍name这个数据

打开之后有两条数据

点击之后全没

3 记住用户名案例

功能是如果用户没有登陆信息就跳转到登陆界面，如果有登陆信息就直接进入首页，如果选择了记住我就存储到localStorage中，下次访问登录页面会直接跳转到主页，如果没有选择记住我，下次访问登陆页面不会直接跳转到主页

<!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>
    <form action="index.html">
        用户名 <input type="text" name="username"><br>
        <input type="checkbox" name="remember">记住我<br>
        <input type="submit" value="登录">
    </form>
</body>
<script>
    username = localStorage.getItem('username')
    if (username != null){
        location.href = 'index.html'
    }

    input_text = document.querySelector("input[type='text']")
    input_checkbox = document.querySelector("input[type='checkbox']")
    input_submit = document.querySelector("input[type='submit']")

    input_submit.addEventListener('click',function() {
        username = input_text.value
        if (input_checkbox.checked == true) {
            localStorage.setItem('username',username)
        }
        else {
            sessionStorage.setItem('username',username)
        }
    })
</script>
</html>

index.html

<!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>
    你好，
</body>
<script>
    username = localStorage.getItem('username')

    if (username==null) {
        username = sessionStorage.getItem('username')
        if (username==null) {
            location.href = 'login.html'
        }
        
    }

    span = document.createElement('span')
    span.innerText = username
    document.body.appendChild(span)

</script>
</html>

经测试可以满足要求

Suyuoa

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
40.本地存储

本地存储可以把数据存在浏览器中，减少用户与服务器的交互有sessionStorage与localStorage两种方式可以本地存储数据，sessionStorage容量约5M，localStorage容量约20M本地存储只能存储字符串，可以将对象JSON.stringify()编码后存储。...
复制链接

扫一扫