JS-本地存储

目录

概述

本地存储特性

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>

 效果  

 

点击获取数据

 点击删除数据

localStorege

 说明 

1.生命周期永久生效，关闭页面也还会存在 ，除非手动删除。

2.可以多页面共享数据（需要同浏览器）。

3.以键值对的方式存储使用。

 使用 

localStorege的方法和使用跟sessionStorege基本一致。

两者的使用选择：

可以考虑生命周期和是否需要多页面共享，来对两者进行选择使用。