localStorage和sessionStorage数据存储

最新推荐文章于 2023-02-10 13:40:11 发布

原创最新推荐文章于 2023-02-10 13:40:11 发布 · 521 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

本文详细介绍了前端开发中localStorage和sessionStorage的使用，包括它们的方法（setItem、getItem、removeItem等）、属性（length、key、clear）以及应用场景。示例代码展示了如何在网页中存储、获取和删除数据，帮助理解两者在数据持久性和会话存储上的区别。

一localStorage 的使用

localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

不管是 localStorage，还是 sessionStorage，可使用的 API 方法和属性都相同：

方法和属性	描述
setItem(key, value)	该方法接收一个键名和值作为参数，将会把键值对添加到存储中，如果键名已存在，则更新其对应的值。
getItem(key)	该方法接收一个键名作为参数，返回键名对应的值。
removeItem(key)	该方法接收一个键名作为参数，并把该键名和值从存储中删除。
length	类似数组的 length 属性，用于访问 Storage 对象中 item 的数量。
key(n)	用于访问第 n 个 key 的名称。
clear()	清除当前域下的所有键值对。

二sessionStorage 的使用

sessionStorage 方法针对一个 session（会话）进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

 <body>
        <button onclick="save()">点我存放数据</button>
        <button onclick="get()">点我拿取数据</button>
        <button onclick="remove()">点我删除数据</button>
        <div id="aa"></div>
    </body>
    <script>
        // 存储数据,key和value
        function save() {
            localStorage.setItem("百度", "https://www.baidu.com")
        }
        // 通过key值拿取数据,并把数据给到元素页面上
        function get() {
            document.getElementById("aa").innerText = localStorage.getItem("百度")
        }
        //通过删除key来删除数据
        function remove() {
            localStorage.removeItem("百度")
        }
    </script>