浏览器本地存储

最新推荐文章于 2024-04-30 10:12:21 发布

寒冰1307

最新推荐文章于 2024-04-30 10:12:21 发布

阅读量312

点赞数

分类专栏： Vue JavaScript 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/hanbing1307/article/details/129510856

版权

JavaScript 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

Vue

3 篇文章 0 订阅

订阅专栏

一、本地存储是什么

通过本地存储（Local Storage），web 应用程序能够在用户浏览器中对数据进行本地的存储。

在 HTML5 之前，应用程序数据只能存储在 cookie 中，包括每个服务器请求。本地存储则更安全，并且可在不影响网站性能的前提下将大量数据存储于本地。

与 cookie 不同，存储限制要大得多（至少5MB），并且信息不会被传输到服务器。

本地存储经由起源地（origin）（经由域和协议）。所有页面，从起源地，能够存储和访问相同的数据。

二、HTML本地存储对象

HTML 本地存储提供了两个在客户端存储数据的对象：

window.localStorage - 存储没有截止日期的数据
window.sessionStorage - 针对一个 session 来存储数据（当关闭浏览器标签页时数据会丢失）

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>
    <h1>localStorage</h1>
    <button onclick="saveDate()">点我保存一个数据</button>
    <button onclick="readDate()">点我读取一个数据</button>
    <button onclick="deleteDate()">点我删除一个数据</button>
    <button onclick="deleteAllDate()">点我删除全部数据</button>

    <script>
        let p = {name:'张三', age:18}
        function saveDate(){
            localStorage.setItem('msg', 'hello123')
            localStorage.setItem('msg2', 666)
            localStorage.setItem('msg3', JSON.stringify(p))
        }
        function readDate(){
            console.log(localStorage.getItem('msg'));
            console.log(localStorage.getItem('msg2'));

            const result = localStorage.getItem('msg3')
            console.log(JSON.parse(result));
           
        }
        function deleteDate(){
            localStorage.removeItem('msg')
        }

        function deleteAllDate(){
            localStorage.clear()
        }
    </script>

</body>
</html>

sessionStorage练习代码

<!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>
    <h1>sessionStorage</h1>
    <button onclick="saveDate()">点我保存一个数据</button>
    <button onclick="readDate()">点我读取一个数据</button>
    <button onclick="deleteDate()">点我删除一个数据</button>
    <button onclick="deleteAllDate()">点我删除全部数据</button>

    <script>
        let p = {name:'张三', age:18}
        function saveDate(){
            sessionStorage.setItem('msg', 'hello123')
            sessionStorage.setItem('msg2', 666)
            sessionStorage.setItem('msg3', JSON.stringify(p))
        }
        function readDate(){
            console.log(sessionStorage.getItem('msg'));
            console.log(sessionStorage.getItem('msg2'));

            const result = sessionStorage.getItem('msg3')
            console.log(JSON.parse(result));
           
        }
        function deleteDate(){
            sessionStorage.removeItem('msg')
        }

        function deleteAllDate(){
            sessionStorage.clear()
        }
    </script>
</body>
</html>

三、webStorage web存储

1、存储内容大小一般支持5mb左右（不同浏览器可能不一样）

2、浏览器端通过Window.sessionStorage和Window.localStorage属性来实现本地存储机制

3、相关API

- xxxxxStorage.setItem('key', 'value')

该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则会更新其对应的值

- xxxxxStorage.getItem('key', 'value')

该方法接受一个键和值作为参数，返回键名对应的值

- xxxxxStorage.removeItem('key', 'value')

该方法接受一个键和值作为参数，并把该键名从存储中删除

- xxxxxStorage.getItem('key', 'value')

该方法会清空存储中所有数据

4、备注

- SessionStorage存储内容会随着浏览器关闭而消失

- LocalStorage存储的内容，需要手动清除才会消失

- xxxxxStorage.getItem('key', 'value') 如果xxx对应的value获取不到，则返回值是null

- JSON.parse(null)的结果依然是null

寒冰1307

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浏览器本地存储

本地存储则更安全，并且可在不影响网站性能的前提下将大量数据存储于本地。2、浏览器端通过Window.sessionStorage和Window.localStorage属性来实现本地存储机制。该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则会更新其对应的值。通过本地存储（Local Storage），web 应用程序能够在用户浏览器中对数据进行本地的存储。所有页面，从起源地，能够存储和访问相同的数据。该方法接受一个键和值作为参数，并把该键名从存储中删除。该方法会清空存储中所有数据。
复制链接

扫一扫

专栏目录