JS本地存储

已于 2022-02-19 17:57:26 修改
阅读量2.3k 收藏 20
点赞数 4
分类专栏： JS详解（从零到一） 文章标签： 本地存储 sessionStorage localStorage JS
于 2022-02-19 11:17:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mengfanshaoxia/article/details/123014802
版权

目录

JS本地存储

一、本地存储特性

二、sessionStorage

2.1、sessionStorage特点

2.2、存储数据sessionStorage.setItem(key, value)

2.3、获取数据sessionStorage.getItem(key)

2.4、删除一个数据sessionStorage.removeItem(key)

​2.5、删除全部数据sessionStorage.clear()

三、localStorage

3.1、localStorage特点

3.2、存储数据localStorage.setItem(key, value)

3.3、获取数据localStorage.getItem(key)

3.4、删除一个数据localStorage.removeItem(key)

3.5、删除全部数据localStorage.clear()

四、记住用户名案例

JS本地存储

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5 规范提出了相关解决方案。

一、本地存储特性

（1） 数据存储在用户浏览器中 
（2）设置和读取数据方便，而且页面刷新不丢失数据
（3） 容量较大， sessionStorage 约 5M 、 localStorage 约 20M
（4）只能存储字符串，可以将对象 JSON.stringify() 编码后存储

二、sessionStorage

2.1、sessionStorage特点

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

（2）在同一个窗口(页面)下数据可以共享

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

方法：

2.2、存储数据sessionStorage.setItem(key, value)

代码如下：

    <input type="text">
    <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')
            //存储数据
        set.addEventListener('click', function() {
            //当我们点击之后，就可以把表单里的值存储起来
            var val = ipt.value;
            sessionStorage.setItem('uname', val);
        })
    </script>

运行结果：

2.3、获取数据sessionStorage.getItem(key)

代码如下：

    <input type="text">
    <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')

        //存储数据
        set.addEventListener('click', function() {
                //当我们点击之后，就可以把表单里的值存储起来
                var val = ipt.value;
                sessionStorage.setItem('uname', val);
            })
            //获取数据
        get.addEventListener('click', function() {
            // 当我们点击之后，就可以把数据获取过来
            console.log(sessionStorage.getItem('uname'));
        })
    </script>

运行结果：

2.4、删除一个数据sessionStorage.removeItem(key)

 代码如下：

    <input type="text">
    <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')
            //存储数据
        set.addEventListener('click', function() {
                //当我们点击之后，就可以把表单里的值存储起来
                var val = ipt.value;
                sessionStorage.setItem('uname', val);
                sessionStorage.setItem('pws', val);
            })
            //获取数据
        get.addEventListener('click', function() {
            // 当我们点击之后，就可以把数据获取过来
            console.log(sessionStorage.getItem('uname'));
        })

        //删除数据
        remove.addEventListener('click', function() {
            // 当我们点击之后，就可以把数据一条一条的删除
            sessionStorage.removeItem('uname');
        })
    </script>

运行结果：

存储两个数据，只删除一个

2.5、删除全部数据sessionStorage.clear()

    <input type="text">
    <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('pws', val);
            })
            //获取数据
        get.addEventListener('click', function() {
            // 当我们点击之后，就可以把数据获取过来
            console.log(sessionStorage.getItem('uname'));
        })

        //删除一个数据
        remove.addEventListener('click', function() {
            // 当我们点击之后，就可以把数据一条一条的删除
            sessionStorage.removeItem('uname');
        })

        //删除全部数据
        del.addEventListener('click', function() {
            // 当我们点击之后，就可以把数据全部删除
            sessionStorage.clear();
        })
    </script>

三、localStorage

3.1、localStorage特点

（1）声明周期永久生效，除非手动删除否则关闭页面也会存在

（2）可以多窗口（页面）共享（同一浏览器可以共享）

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

方法：

3.2、存储数据localStorage.setItem(key, value)

代码如下：

    <input type="text">
    <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;
                localStorage.setItem('uname', val);
            })
     </script>

运行结果；

3.3、获取数据localStorage.getItem(key)

    <input type="text">
    <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;
            localStorage.setItem('uname', val);
        })

        //获取数据
        get.addEventListener('click', function() {
            // 当我们点击之后，就可以把数据获取过来
            console.log(localStorage.getItem('uname'));
        })
    </script>

3.4、删除一个数据localStorage.removeItem(key)

   <input type="text">
    <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;
            localStorage.setItem('uname', val);
        })

        //获取数据
        get.addEventListener('click', function() {
            // 当我们点击之后，就可以把数据获取过来
            console.log(localStorage.getItem('uname'));
        })

        //删除一个数据
        remove.addEventListener('click', function() {
            // 当我们点击之后，就可以把数据一条一条的删除
            localStorage.removeItem('uname');
        })
    </script>

3.5、删除全部数据localStorage.clear()

   <input type="text">
    <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;
            localStorage.setItem('uname', val);
        })

        //获取数据
        get.addEventListener('click', function() {
            // 当我们点击之后，就可以把数据获取过来
            console.log(localStorage.getItem('uname'));
        })

        //删除一个数据
        remove.addEventListener('click', function() {
            // 当我们点击之后，就可以把数据一条一条的删除
            localStorage.removeItem('uname');
        })

        //删除全部数据
        del.addEventListener('click', function() {
            // 当我们点击之后，就可以把数据全部删除
            localStorage.clear();
        })
    </script>

四、记住用户名案例

需求：

如果勾选记住用户名，下次用户打开浏览器，就在文本框里自动显示上次登录用户名

案例分析：

（1）把数据存储起来，用到本地存储；

（2）关闭页面，也可以显示用户名，所以用到localStorage；

（3）打开页面，先判断是否有这个用户名，如果有就在表单里面显示用户名，并且勾选复选框；

（4）当复选框发生改变的时候change事件；

（5）如果勾选，就存储，否则就移除。

代码：


    <input type="text" id="username">
    <input type="checkbox" id="remeber">记住用户名
    <script>
        var username = document.querySelector('#username');
        var remeber = document.querySelector('#remeber');

        //判断有没有数据
        if (localStorage.getItem('username')) {
            // 有则取
            username.value = localStorage.getItem('username');
            // 同时勾选复选框
            remeber.checked = true;
        }

        remeber.addEventListener('change', function() {

            if (this.checked) {
                localStorage.setItem('username', username.value)
            } else {
                localStorage.removeItem('username');
            }
        })
    </script>

运行结果；

梦樊哥哥
关注
专栏目录
JavaScript本地存储（Local Storage）
rr20060119的博客
09-27 961
JavaScript本地存储是一项非常有用的技术。它允许我们在用户的浏览器中存储数据，以便在不同的网页之间保持持久性。
基于js 本地存储(详解)
10-19
JavaScript本地存储技术允许开发者在用户浏览器中保存数据，即使用户关闭了浏览器，这些数据仍然能够被保留。这在实现特定功能如记住用户状态、购物车持久化等方面非常有用。主要的本地存储方案包括Cookie、...
JavaScript 中的本地存储方式及其应用场景概述
最新发布
Sherry Tian的博客
10-01 1277
本篇讲解JavaScript的本地存储方式都有哪些，分别使用场景是哪些，区别是什么。
JS-本地存储
maohe的博客
10-17 2307
JavaScript本地存储数据，sessionStorege 和 localStorege 的使用。
JS实现本地存储信息的方法(基于localStorage与userData)
10-20
在JavaScript中，本地存储数据的需求常常出现，特别是在Web应用程序中，需要在用户关闭浏览器后仍然保留某些信息，例如用户的偏好设置、游戏进度等。传统的Cookie虽然可以实现这个功能，但它存在容量限制（一般为4...
原生JS实现购物车本地存储
08-18
利用原生js和本地存储技术实现购物车功能
js——本地存储
qq_64536562的博客
07-18 852
1.l ocalStorage 作用是什么?可以将数据永久存储在本地(用户的电脑)，除非手动删除，否则关闭页面也会存在。2. localStorage 存储，获取，删除的语法是什么?
JS之本地存储
释怀°Believe的博客
03-06 1966
JS之本地存储
JavaScript 本地存储
qq_16488609的博客
04-29 346
1.Cookie 简介 Cookie 是一些数据, 存储于你电脑上的文本文件中，用于存储 web 页面的用户信息 Cookie 数据是以键值对的形式存在的，每个键值对都有过期时间。如果不设置时间，浏览器关闭，cookie就会消失，当然用户也可以手动清除cookie Cookie每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题 Cookie内存大小受限，一般每个域...
JS 本地储存 【详细】
egg_er的博客
01-02 1万+
本地储存 为什么需要本地存储呢： 数据存储在用户浏览器中，在控制台中Application模块中查看。 设置、读取方便、甚至页面刷新不丢失数据 容量较大，sessionStorage约5M、localStorage约20M 只能存储字符串，可以将对象JSON.stringify() 编码后存储 Application模块： 本地储存分两种，一种是sessionStorage,以及localStorage.那么有什么异同点呢？ 分别来说： window.sessionStorage 生命周期为关闭浏
js本地存储：localStorage
dongcancui8976的博客
11-20 364
一.简介 　　localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库 　　 ——注意：在IE8以上的IE版本才支持localStorage这个属性。localStorage属于永久性存储，如果存储内容多的话会消耗内存空间，会导致页面变卡。 二.具体使用方式如下： 　　1.localStorage -没有时间限制的数据...
js—localstorage (本地存储）必知
mxjwxhn的博客
10-21 8878
HTML API localstorage 在浏览器的 API 有两个：localStorage 和sessionStorage，存在于 window 对象中：localStorage 对应 window.localStorage，sessionStorage 对应window.sessionStorage。localStorage 和 sessionStorage 的区别主要是在于其生存期。 基本用法 localStorage只要在相同的协议、相同的主机名、相同的端口下，就能读取/修改到同一份loc
【前端知识之JS】JS本地存储
weixin_44337386的博客
06-08 8649
本系列主要整理前端面试中需要掌握的知识点。本节介绍本地存储的四种方式，以及他们的比较和应用。
localStorage.setItem()使用
热门推荐
weixin_41997724的博客
11-27 13万+
什么是localStorage 在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。 localStorage的优势 1、localStorage拓展...
js 本地存储 对象存储
iteye_17819的博客
07-30 872
使用getItem()和setItem()来取数据和存数据 localStorage.setItem("data","item");//设置data为"item" localStorage.getItem("data");//获取data的值   HTML5还提供了一个key()方法，可以在不知道有哪些键值的时候使用 var storage = window.localStorag...
JS本地存储(localStorage)
珎珎啊
10-22 4502
一. 简介 localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库 　 ——注意：在IE8以上的IE版本才支持localStorage这个属性。localStorage属于永久性存储，如果存储内容多的话会消耗内存空间，会导致页面变卡。 二.具体使用方式如下： 1.localStorage - 没有时间限制的数据存储 　　 var arr=[1,2,3]; 　　 localStorage.setItem(“temp”,arr); //存入 参数： 1.调
js本地存储localstorage
03-16
JS本地存储localstorage是一种在浏览器中存储数据的技术，它允许开发者将数据存储在用户的本地浏览器中，以便在用户下次访问网站时可以快速地获取数据。使用localstorage可以避免每次都向服务器请求数据，提高网站的性能和用户体验。同时，localstorage也具有简单易用、存储容量大等优点，是前端开发中常用的技术之一。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值