localStorage存储

最新推荐文章于 2024-04-28 10:45:45 发布

转载最新推荐文章于 2024-04-28 10:45:45 发布 · 339 阅读

文章标签：

#localStorage

个人笔记专栏收录该内容

19 篇文章

订阅专栏

本文介绍localStorage的基础用法，包括存储数据的特点、容量限制以及如何通过JavaScript进行数据的增删改查操作。

localStorage存储

简单说明

    （1）简单对比：保存在本地 + 没有时间限制
    （2）大小比较：4K - 5M - 20M
    （3）使用方式和sessionStorage相同

示例代码

<input type="text">
<button class="btn1">添加</button>
<button class="btn2">获取</button>
<button class="btn3">更新</button>
<button class="btn4">删除</button>
<button class="btn5">清空</button>


<script>
    window.localStorage.setItem("age","18");
    window.localStorage.setItem("color","red");
    window.localStorage.setItem("des","no des");
    var oInput = document.querySelector("input");
    var oBtn1 = document.querySelector(".btn1");

    oBtn1.onclick = function () {
        //添加操作
        window.localStorage.setItem("name",oInput.value);
    };
    var oBtn2 = document.querySelector(".btn2");
    oBtn2.onclick = function () {
        //获取操作
        console.log(window.localStorage.getItem("name"));
    };

    var oBtn3 = document.querySelector(".btn3");
    oBtn3.onclick = function () {
        //更新操作
        window.localStorage.setItem("name",oInput.value);
    };
    var oBtn4 = document.querySelector(".btn4");
    oBtn4.onclick = function () {
        //删除操作
        window.localStorage.removeItem("name");
    };
    var oBtn5 = document.querySelector(".btn5");
    oBtn5.onclick = function () {
        //清空操作
        window.localStorage.clear();
    };

</script>