(JavaScript - 原生) WEB 本地存储

最新推荐文章于 2024-05-08 17:57:05 发布
最新推荐文章于 2024-05-08 17:57:05 发布
阅读量287 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39872652/article/details/83477441
版权

                              (JavaScript - 原生) WEB 本地存储

一、什么是 WEB 本地存储?

WEB 本地存储就是将数据以键值对的形式存储到本地。

-1).经过 WEB本地存储的数据究竟存储到了哪?

存储位置:

打开:(值 firstUseLocalStorage 就是要存储的值-> 后面代码中会有体现)

-2).WEB 本地存储的分类及介绍
WEB 本地存储分为两种:(localStorage、sessionStorage)

> - 通过 localStorage 存储的数据会一直存在,除非你手动的进行删除(言外之意就是与你关不关闭当前网页/浏览器没有关系)。

> - 通过 sessionStorage 存储的数据会随着当前会话挂掉而消失。

二、为什么使用 WEB 本地存储?

我们都知道后端有数据库可以存储数据,但是随着前端的发展,我们的前端可能也需要存储一些数据,其中兼容性最好的就是这个 'cookie' ,但是 'cookie' 虽然兼容性好一些也有局限性,

(就比如每次都会被请求携带着发送给服务器)、

(每个cookie可以存储的数据的大小仅为4KB)、

(一个浏览器能创建的 Cookie 数量最多为 300 个，每个 Web 站点能设置的 Cookie 总数不能超过 20 个)

鉴于以上问题 H5 新特性的 WEB 本地存储机制应运而生。

三、怎么使用 WEB 本地存储?

1.localStorage:

运行以下代码:

<script>
    window.onload = function () {
        'use strict';

        /**
         * @author 刘杰
         * @version 1.0
         * WEB 存储
         */

        /*
         * -1).在新增的 H5 新特性中提供了一个功能叫做(WEB 存储也叫本地存储)
         * -2).WEB 存储包括两种方式:
         *  -> localStorage => 通过这个方式存储的数据是一直有效的,除非你手动删除此数据。言外之意就是使用 localStorage 方式进行数据的存储与关闭当前页面/浏览器毫无关系。
         *
         *  -> sessionStorage => 通过这个方式存储的数据只是在当前页面中有效,一旦页面挂掉数据就全部消失。
         *
         **/

        // 测试之前先判断当前浏览器是否支持 WEB 本地存储
        if(typeof Storage !== undefined) {

            // 测试 localStorage 存储
            // 存储数据的3种方式

            // 1.点的方式
            localStorage.userName = "LJ";

            // 2.索引的方式
            localStorage["userAge"] = 21;

            // 3.通过自带 api 的方式
            localStorage.setItem("userHobby", "敲代码 ...");

            // 先运行上面的代码
            
        }else {
            console.error("Sorry, your browser does not support WEB local storage!");
        }




    }
</script>

什么也没有,但是此时我们的数据就已经被存储起来了。当我们关掉当前页面或者关闭当前浏览器的时候。

运行以下代码:

<script>
    window.onload = function () {
        'use strict';

        /**
         * @author 刘杰
         * @version 1.0
         * WEB 存储
         */

        /*
         * -1).在新增的 H5 新特性中提供了一个功能叫做(WEB 存储也叫本地存储)
         * -2).WEB 存储包括两种方式:
         *  -> localStorage => 通过这个方式存储的数据是一直有效的,除非你手动删除此数据。言外之意就是使用 localStorage 方式进行数据的存储与关闭当前页面/浏览器毫无关系。
         *
         *  -> sessionStorage => 通过这个方式存储的数据只是在当前页面中有效,一旦页面挂掉数据就全部消失。
         *
         **/

        // 测试之前先判断当前浏览器是否支持 WEB 本地存储
        if(typeof Storage !== undefined) {

            // 测试 localStorage 存储
            // 存储数据的3种方式

            // 1.点的方式
            // localStorage.userName = "LJ";

            // 2.索引的方式
            // localStorage["userAge"] = 21;

            // 3.通过自带 api 的方式
            // localStorage.setItem("userHobby", "敲代码 ...");

            // 再运行下面的代码
            console.log(`userName:${localStorage.userName}`);
            console.log(`userName:${localStorage["userAge"]}`);
            console.log(`userName:${localStorage.getItem("userHobby")}`);

        }else {
            console.error("Sorry, your browser does not support WEB local storage!");
        }




    }
</script>

依然可以取到值:

2.sessionStorage:

运行代码:

<script>
    window.onload = function () {
        'use strict';

        /**
         * @author 刘杰
         * @version 1.0
         * WEB 存储
         */

        /*
         * -1).在新增的 H5 新特性中提供了一个功能叫做(WEB 存储也叫本地存储)
         * -2).WEB 存储包括两种方式:
         *  -> localStorage => 通过这个方式存储的数据是一直有效的,除非你手动删除此数据。言外之意就是使用 localStorage 方式进行数据的存储与关闭当前页面/浏览器毫无关系。
         *
         *  -> sessionStorage => 通过这个方式存储的数据只是在当前页面中有效,一旦页面挂掉数据就全部消失。
         *
         **/

        // 测试之前先判断当前浏览器是否支持 WEB 本地存储
        if(typeof Storage !== undefined) {

            // 测试 localStorage 存储
            // 存储数据的3种方式

            // 1.点的方式
            // localStorage.userName = "LJ";

            // 2.索引的方式
            // localStorage["userAge"] = 21;

            // 3.通过自带 api 的方式
            // localStorage.setItem("userHobby", "敲代码 ...");

            // 再运行下面的代码
            // console.log(`userName:${localStorage.userName}`);
            // console.log(`userName:${localStorage["userAge"]}`);
            // console.log(`userName:${localStorage.getItem("userHobby")}`);


            // 测试 sessionStorage 存储
            // 存储数据的方式与 localStorage 一样也有 3种。

            // 存储数据
            sessionStorage.setItem("phone", "17803218829")

            // 从当前页面进行取值
            console.log(`phone:${sessionStorage.phone}`);

        }else {
            console.error("Sorry, your browser does not support WEB local storage!");
        }

    }
</script>

关闭页面以后 -> 

运行代码:

<script>
    window.onload = function () {
        'use strict';

        /**
         * @author 刘杰
         * @version 1.0
         * WEB 存储
         */

        /*
         * -1).在新增的 H5 新特性中提供了一个功能叫做(WEB 存储也叫本地存储)
         * -2).WEB 存储包括两种方式:
         *  -> localStorage => 通过这个方式存储的数据是一直有效的,除非你手动删除此数据。言外之意就是使用 localStorage 方式进行数据的存储与关闭当前页面/浏览器毫无关系。
         *
         *  -> sessionStorage => 通过这个方式存储的数据只是在当前页面中有效,一旦页面挂掉数据就全部消失。
         *
         **/

        // 测试之前先判断当前浏览器是否支持 WEB 本地存储
        if(typeof Storage !== undefined) {

            // 测试 localStorage 存储
            // 存储数据的3种方式

            // 1.点的方式
            // localStorage.userName = "LJ";

            // 2.索引的方式
            // localStorage["userAge"] = 21;

            // 3.通过自带 api 的方式
            // localStorage.setItem("userHobby", "敲代码 ...");

            // 再运行下面的代码
            // console.log(`userName:${localStorage.userName}`);
            // console.log(`userName:${localStorage["userAge"]}`);
            // console.log(`userName:${localStorage.getItem("userHobby")}`);


            // 测试 sessionStorage 存储
            // 存储数据的方式与 localStorage 一样也有 3种。

            // 存储数据
            // sessionStorage.setItem("phone", "17803218829")

            // 从当前页面进行取值
            console.log(`phone:${sessionStorage.phone}`);

        }else {
            console.error("Sorry, your browser does not support WEB local storage!");
        }

    }
</script>

结果源数据丢失:

> - 补充无论是 localStorage 还是 sessionStorage 都有 clear 方法可以将所存储的全部数据进行清除。

> - 上面我们存储年龄的时候存进去的是一个数字但是取出却是一个字符串(说明WEB 本地存储会将所有的数据转换为字符串)。

> - web 本地存储还可以存储对象,但是建议这个对象必须是 Json 格式的,因为只有这样我们在将其取出复用的时候才会方便的多。

运行代码:

<script>
    window.onload = function () {
        'use strict';

        /**
         * @author 刘杰
         * @version 1.0
         * WEB 存储
         */

        /*
         * -1).在新增的 H5 新特性中提供了一个功能叫做(WEB 存储也叫本地存储)
         * -2).WEB 存储包括两种方式:
         *  -> localStorage => 通过这个方式存储的数据是一直有效的,除非你手动删除此数据。言外之意就是使用 localStorage 方式进行数据的存储与关闭当前页面/浏览器毫无关系。
         *
         *  -> sessionStorage => 通过这个方式存储的数据只是在当前页面中有效,一旦页面挂掉数据就全部消失。
         *
         **/

        // 测试之前先判断当前浏览器是否支持 WEB 本地存储
        if(typeof Storage !== undefined) {

            // 测试 localStorage 存储
            // 存储数据的3种方式

            // 1.点的方式
            // localStorage.userName = "LJ";

            // 2.索引的方式
            // localStorage["userAge"] = 21;

            // 3.通过自带 api 的方式
            // localStorage.setItem("userHobby", "敲代码 ...");

            // 再运行下面的代码
            // console.log(`userName:${localStorage.userName}`);
            // console.log(`userName:${localStorage["userAge"]}`);
            // console.log(typeof localStorage["userAge"]);
            // console.log(`userName:${localStorage.getItem("userHobby")}`);


            // 测试 sessionStorage 存储
            // 存储数据的方式与 localStorage 一样也有 3种。

            // 存储数据
            // sessionStorage.setItem("phone", "17803218829")

            // 从当前页面进行取值
            // console.log(`phone:${sessionStorage.phone}`);


            // 存储对象
            var obj = {
                name: "XXY",
                action: "run"
            };
            obj = JSON.stringify(obj);
            console.log(obj);

            localStorage.setItem("obj", obj);
        }else {
            console.error("Sorry, your browser does not support WEB local storage!");
        }

    }
</script>

先关闭当前页面/浏览器(因为这次使用的是 localStorage 存储)

运行代码:

<script>
    window.onload = function () {
        'use strict';

        /**
         * @author 刘杰
         * @version 1.0
         * WEB 存储
         */

        /*
         * -1).在新增的 H5 新特性中提供了一个功能叫做(WEB 存储也叫本地存储)
         * -2).WEB 存储包括两种方式:
         *  -> localStorage => 通过这个方式存储的数据是一直有效的,除非你手动删除此数据。言外之意就是使用 localStorage 方式进行数据的存储与关闭当前页面/浏览器毫无关系。
         *
         *  -> sessionStorage => 通过这个方式存储的数据只是在当前页面中有效,一旦页面挂掉数据就全部消失。
         *
         **/

        // 测试之前先判断当前浏览器是否支持 WEB 本地存储
        if(typeof Storage !== undefined) {

            // 测试 localStorage 存储
            // 存储数据的3种方式

            // 1.点的方式
            // localStorage.userName = "LJ";

            // 2.索引的方式
            // localStorage["userAge"] = 21;

            // 3.通过自带 api 的方式
            // localStorage.setItem("userHobby", "敲代码 ...");

            // 再运行下面的代码
            // console.log(`userName:${localStorage.userName}`);
            // console.log(`userName:${localStorage["userAge"]}`);
            // console.log(typeof localStorage["userAge"]);
            // console.log(`userName:${localStorage.getItem("userHobby")}`);


            // 测试 sessionStorage 存储
            // 存储数据的方式与 localStorage 一样也有 3种。

            // 存储数据
            // sessionStorage.setItem("phone", "17803218829")

            // 从当前页面进行取值
            // console.log(`phone:${sessionStorage.phone}`);


            // 存储对象
            var obj = {
                name: "XXY",
                action: "run"
            };
            obj = JSON.stringify(obj);
            console.log(obj);
            localStorage.setItem("obj", obj);
            obj = eval("(" + localStorage["obj"] + ")");
            console.log(Object.prototype.toString.call(obj));
            console.log(obj["action"]);
        }else {
            console.error("Sorry, your browser does not support WEB local storage!");
        }

    }
</script>

结果:

这就是 WEB 本地存储的神奇之处:其实我们使用谷歌浏览器的 'Application' 就可以方便的查看我们存储的信息 

> 总结:

 - 为了弥补前端存储一些数据比较局限的问题,WEB 本地存储的出现正好解决了这个问题。

- 但是 web 本地存储分为两种

一种为(localStorage):

存储的数据长期有效,与是否关闭当前页面/浏览器无关,除非你手动删除数据否则一直存在。

另一种为(sessionStorage):

存储的数据有效期限只是局限于当前页面

 - 所存储的数据都是键值对儿的形式

 - WEB 本地存储会默认在存储的时候将其它的数据类型转换为字符串类型

 - WEB 本地存储不仅可以存储简单的数据,还可以存储对象,但是这个对象前提是我们将其转换为 JSON 格式。

 - 其真实文件默认存储路径 -> 请看最顶部 [什么是 WEB本地存储?]

 - 最直观的查看可以借助谷歌浏览器中的 Application 。

以上就是这一期对于 H5 新增的特性之一 WEB 本地存储的浅显探究与说明,希望可以抛砖引玉,如有错误的地方还请指出,共同进步!

萍果吮雨
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js中的本地存储（webStorage）
李公子的博客
08-05 901
webStorage （Window.sessionStorage和Window.localStorage） 1.存储内容大小一般支持5MB左右（不同浏览器可能还不一样） 2.浏览器端通过Window.sessionStorage和Window.localStorage属性来实现本地存储机制。 3.相关API： 1.```xxxxxStorage.setItem('key','value');``` 该方法接受一个键...
一文读懂浏览器本地存储：Web Storage
zhuanzhuantech的博客
08-01 2586
希望通过此篇文章，可以让大家了解 Web Storage 在浏览器数据存储和读取的相关操作，以及相关事件和限制。
JavaScript本地存储的方式有哪些，已经应用场景
最新发布
读心悦
05-08 434
但是cookie在每次发起请求中都会被发送，如果不使用HTTPS，并对它加密，那么保存的信息很容被窃取，导致安全风险。sessionStorage的用法和localStorage的用法一直，唯一不同的是生命周期，一旦页面关闭，sessionStorage将会删除数据。indexedDB是一种低级的API，用于客户端存储大量结构化的数据，indexedDB使用索引来实现对数据的高性能搜索。cookie，小型文本文件，指的是网站为了辨别用户分身而储存在用户本地终端上的数据。是为了解决http无状态导致的问题。
WebStorage之浏览器的本地存储（结合案例）
zxdznyy的博客
01-16 1634
浏览器的本地存储可以缓存一些信息在浏览器中，方便取用。在学习中我们可以直观看到信息在浏览器中被存储，并想办法读取到；在项目中的应用更加广泛，如登录后把用户信息放在浏览器中，方便取用。
最详细：浏览器存储webStorage——本地存储localStorage&会话存储sessionStorage
weixin_56242678的博客
06-03 1692
webStorage是localStorage和sessionStorage的统称，存储内容大小一般为5MB左右（不同浏览器不一样），浏览器通过window.localStorage和window.sessionStorage属性来实现本地存储机制。相关API如下。
JavaScript——本地存储
m0_57184906的博客
03-18 364
以前我们页面写的数据一刷新页面就没有了，是不是？
web-原生js实现购物车
01-14
本教程将探讨如何使用原生JavaScript实现一个基础的购物车功能，这将涵盖一些核心概念，包括DOM操作、数据存储和用户交互。 首先，购物车的核心功能包括添加商品、删除商品、更新商品数量以及计算总价。在...
贪吃蛇游戏 - 原生JavaScript实现
04-18
JavaScript是一种广泛用于Web开发的脚本语言，它在浏览器端运行，负责处理用户交互、动态内容以及与服务器的通信。原生JavaScript意味着我们不依赖任何外部库或框架，如jQuery或React，而是直接使用语言的基本功能来...
5543061-ecrivez-du-javascript-pour-le-web-activity
05-06
标题 "5543061-ecrivez-du-javascript-pour-le-web-activity" 暗示这是一个关于使用JavaScript进行Web开发的课程项目，可能是某个在线公开课的一部分。描述中提到“克隆该存储库并添加webpack”，这表明这个项目涉及...
WEB大作业-原生电商网站项目.zip
04-24
这个名为“WEB大作业-原生电商网站项目”的压缩包文件，提供了一个完整的电商网站开发实例，旨在帮助学习者掌握前端与后端的基础知识。这个项目不仅包括了HTML、CSS、JavaScript的原生应用，还涵盖了PHP后端技术，...
web-javascript
03-19
9. **Web API和WebGL**：Web API如WebSocket用于实现双向通信，Web Storage提供本地数据存储，Web Workers处理后台任务，WebGL则允许在浏览器中进行3D图形渲染。 10. **跨平台开发**：借助React Native或 Ionic，...
【JavaScript】本地存储
小秀的博客
08-06 652
在JavaScript中，本地存储是一种可以在浏览器中存储数据的机制。它允许开发者在浏览器中保存键值对，并且这些数据可以在同一个域名下的不同页面间进行共享。需要注意的是，对于安全性敏感的数据，如用户凭证或个人隐私信息，应避免在本地存储中存储，而应考虑使用服务器端的认证和加密机制来保护数据安全。仅在当前会话（当前浏览器标签页或窗口）中保留数据，在关闭会话后数据会被清除。在整个浏览器窗口关闭后仍然保留数据，因此可以用于持久化存储。两种本地存储机制都只能存储字符串类型的数据。
JavaScript本地存储（Local Storage）
rr20060119的博客
09-27 831
JavaScript本地存储是一项非常有用的技术。它允许我们在用户的浏览器中存储数据，以便在不同的网页之间保持持久性。
web存储（Storage）
专注于大数据方向，区块链，前后端，数据可视化，人工智能等领域
06-17 7538
Web Storage API 提供了存储机制，通过该机制，浏览器可以安全地存储键值对，比使用 cookie 更加直观。
JavaScript 本地存储
2301_81449444的博客
01-14 582
localStorage.length 获取所有本地 localStorage 的数量。) 通过下标获取存储记录的名称。’) 存值，如果使用相同的名字，那么会覆盖以前的值。’) 删值，删除指定名称的存储记录。在谷歌浏览器中，本地存储的值可以在控制台的。判断本地存储是否有某个名称，有则返回。使用方法相同，这里只演示。
js本地存储（localStorage）和（sessionStorage）
m0_64590669的博客
06-06 424
js本地存储
JS 本地储存 【详细】
egg_er的博客
01-02 9925
本地储存 为什么需要本地存储呢： 数据存储在用户浏览器中，在控制台中Application模块中查看。 设置、读取方便、甚至页面刷新不丢失数据 容量较大，sessionStorage约5M、localStorage约20M 只能存储字符串，可以将对象JSON.stringify() 编码后存储 Application模块： 本地储存分两种，一种是sessionStorage,以及localStorage.那么有什么异同点呢？ 分别来说： window.sessionStorage 生命周期为关闭浏
JavaScript本地存储
橘颂的博客
09-02 515
JavaScript本地存储
JavaScript云原生开发实战指南
在云原生开发中，JavaScript扮演着至关重要的角色，因为它是许多现代Web应用和服务器端框架的基础。本书深入浅出地介绍了如何利用JavaScript来设计和实现可扩展、高可用且易于维护的云服务。这包括但不限于以下几个...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值