本地存储 localStorage sessionStorage

最新推荐文章于 2024-05-24 23:45:01 发布

fb_energetic

最新推荐文章于 2024-05-24 23:45:01 发布

阅读量324

点赞数 2

文章标签：前端

本文链接：https://blog.csdn.net/fb_energetic/article/details/123967659

版权

本地存储的特性

1、数据存储到用户的浏览器中

2、设置、读取方便，甚至页面刷新都不丢失数据

3、容量比较大 sessionStorage约5M localStorage约20M

4、只能存储字符串，可以将对象编码后在存储

sessionStorage

1、生命周期为关闭浏览器窗口

2、在同一个页面共享数据

3、以键值对的形式存储使用

使用示例：

<!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>
    <input type="text" name="" id="">
    <button class="set">存储数据</button>
    <button class="get">获取数据</button>
    <button class="remove">删除数据</button>
    <button class="del">清空所有数据</button>
    <script>
        var ipt = document.querySelector("input");
        var set = document.querySelector(".set");
        var get = document.querySelector(".get");
        var remove = document.querySelector(".remove");
        var del = document.querySelector(".del");
        set.addEventListener("click", function () {
            var val = ipt.value;
            // 当我们点击了之后，我们就把表单里面的值存储起来
            sessionStorage.setItem("uname", val);
            sessionStorage.setItem("psw", val);
        })
        // 点击按钮之后  我们可以把表单里的值获取出来
        get.addEventListener("click", function () {
            console.log(sessionStorage.getItem("uname"));
        })
        // 点击删除相应的数据
        remove.addEventListener("click", function () {
            sessionStorage.removeItem("psw");
        })
        // 点击删除所有的数据
        del.addEventListener("click", function () {
            sessionStorage.clear();
        })

    </script>
</body>

</html>

在浏览器中Application中进行检查。数据都可以找到，再关闭后都失去了。

同理，将代码中sessionStorage换成localStorage再进行试运行检查就明白了。

fb_energetic

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
本地存储 localStorage sessionStorage

本地存储的特性1、数据存储到用户的浏览器中2、设置、读取方便，甚至页面刷新都不丢失数据3、容量比较大 sessionStorage约5M localStorage约20M4、只能存储字符串，可以将对象编码后在存储sessionStorage1、生命周期为关闭浏览器窗口2、在同一个页面共享数据3、以键值对的形式存储使用使用示例：<!DOCTYPE html><html lang="en"><head> <..
复制链接

扫一扫