localStorage-----通过js在浏览器中保存数据-----js如何存储数据

< Cami >

已于 2024-05-07 21:46:44 修改

阅读量339

点赞数 5

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

于 2024-05-07 14:21:25 首次发布

本文链接：https://blog.csdn.net/qq_62563725/article/details/138526892

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

核心代码

mydata = JSON.parse(localStorage.data); // 读取
localStorage.data = JSON.stringify(mydata); // 存入

代码说明

var mydata=[]
// 读取浏览器中，名为data的数据，并将其存入数组mydata中
// 但如果浏览器中没有名为data的数据，就不能读取，会报错
// 所以可以先判断localStorage.data是否为空，再进行读取（如案例中）
mydata = JSON.parse(localStorage.data) 
// 将mydata中的数据，存入浏览器名为data的地方之中
// 若浏览器中没有名为data的地方，则先创建一个名为data的地方，再把数据存入
localStorage.data = JSON.stringify(mydata)

localStorage就跟一个变量一样
在“=”左边可以对其进行写入操作
在“=”右边可以对其进行读取操作

其中
localStorage：存储或读取数据
JSON.parse()：将字符串转化为数组或JSON
JSON.stringify()：将数组或JSON转化为字符串

注：
根据我查的资料显示，每一个网页在浏览器中存储的空间是互相隔离的。
（即这个页面无法引用那个页面存在浏览器中的数据）
但根据我实际的操作，有时是可以成功引用别的页面村的数据，有时又不可以。

补充说明
（1）
localStorage可将数据存储到本地（浏览器）当中
当页面刷新，localStorage保存在浏览器中的数据仍会保留
从而实现了：页面刷新但数据不丢失
（2）
浏览器中查看localStorage存储的数据的方法

查看之后可直接鼠标右键，对密钥和值进行编辑或删除。

示例展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    测试数据存储<input type="text" class="input">
    <button class="buttonSave">保存</button>
    <button class="buttonRead">读取</button>
    <button class="buttonClear">清空数据</button>
    <div class="results"></div>
    <script>
        // 获取输入框的值
        var input = document.getElementsByClassName("input")[0]
        //获取三个按钮
        var buttonSave = document.getElementsByClassName("buttonSave")[0]
        var buttonRead = document.getElementsByClassName("buttonRead")[0]
        var buttonClear = document.getElementsByClassName("buttonClear")[0]
        //获取div，用来显示读取的结果
        var results = document.getElementsByClassName("results")[0]

        // 定义一个数组，用来存储从浏览器中读取到的数据
        var mydata=[]

        // 点击保存按钮
        buttonSave.onclick = function(){
            // localStorage.data:获取浏览器中名为data的数据,得到的数据类型为字符串
            // JSON.parse();将获取到的字符串转化为数组或JSON
            if (localStorage.data != null){
                // 如果localStorage.data不是空的，就把值传给数组mydata
                // 若localStorage.data为空，就把值传给数组mydata就会报错，程序无法正常运行
                mydata = JSON.parse(localStorage.data); 
            }

            // 将输入框的值存入mydata中
            mydata.push(input.value);
            // JSON.stringify();将获取到的数组或JSON转化为字符串(因为localStorage只能存储字符串)
            localStorage.data = JSON.stringify(mydata)

            // 每次保存后，清空输入框，并把焦点回到输入框
            input.value = ''; // 清空输入框
            input.focus(); // 输入框获得鼠标焦点
        }

        // 点击读取按钮
        buttonRead.onclick = function(){
            results.innerHTML = `存储的数据为:${localStorage.data}`
        }

        // 点击清空数据按钮
        buttonClear.onclick = function(){
            // localStorage.clear();清除localStorage中所有的数据
            localStorage.clear();
        }
    </script>
</body>
</html>

示例说明：
输入数据，点击保存，即可将输入的数据存入浏览器之中
点击读取，即可查看存入浏览器中的数据
点击清空数据，即可将浏览器中的所有数据清除。

应用场景

不通过后端和数据库，可直接在浏览器中存储一些数据。

参考资料

【前端经典】js数组和JSON的本地存储，localstorage如何保存数组和JSON，网页设计与制作，前端开发。

< Cami >

关注

5
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
localStorage-----通过js在浏览器中保存数据-----js如何存储数据

当页面刷新，localStorage保存在浏览器中的数据仍会保留。JSON.stringify()：将数组或JSON转化为字符串。localStorage可将数据存储到本地（浏览器）当中。JSON.parse()：将字符串转化为数组或JSON。浏览器中查看localStorage存储的数据的方法。输入数据，点击保存，即可将输入的数据存入浏览器之中。不通过后端和数据库，可直接在浏览器中存储一些数据。点击清空数据，即可将浏览器中的所有数据清除。点击读取，即可查看存入浏览器中的数据。
复制链接

扫一扫