JS-本地存储

发布于：2022-10-17 ⋅ 阅读:(848) ⋅ 点赞:(0)

概述

本地存储特性

sessionStorege

localStorege

概述

我们可以利用本地存储将开发过程中的一些数据存储在本地。

本地存储特性

1.数据存储在用户浏览器中。

2.设置、读取方便，刷新页面存储的数据不会丢失。

3.容量较大，sessionStorege约5M，localstorege约20M（对于存储字符算大）。

4.只能存储字符串。

sessionStorege

说明：

1.sessionStorege的生命周期为浏览器窗口的生命周期，只要关闭浏览器就销毁。

2.sessionStorege存储大小约为5M。

3.在同一个页面下数据可以共享。

4.以键值对的形式存储使用。

使用方法

1.存储数据：setItem(key,value)

2.获取数据：getItem(key)

3.删除数据：removeItem(key)

4.删除所有存储的数据：clear()

使用案例

<button id="get">点击获取存储的留言</button><button id="del">删除存储的留言</button>
<div></div>
<script>
    let temp = prompt("请输入需要存储的留言");
    sessionStorage.setItem("text",temp);
    // 获取元素
    var get = document.querySelector("#get");
    var del = document.querySelector("#del");
    var data = document.querySelector("div");
    
    //绑定事件-点击获取存储数据
    get.addEventListener("click",function(){
        data.innerHTML = sessionStorage.getItem("text");
    })
    
    //点击删除存储数据
    del.addEventListener("click",function(){
        sessionStorage.clear();
        data.innerHTML = "";
    })

</script>

效果