【H5】本地存储sessionStorage与localStorage

最新推荐文章于 2024-04-06 08:27:25 发布

原创最新推荐文章于 2024-04-06 08:27:25 发布 · 295 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#HTML5

HTML5 专栏收录该内容

37 篇文章

订阅专栏

本文深入探讨了H5中sessionStorage与localStorage的特性与使用方法，包括存储限制、数据共享方式及事件触发机制，通过实例代码展示了如何进行数据的添加、获取与删除。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

【H5】本地存储sessionStorage与localStorage

Storage特点：

            1.存储量限制 ( 5M )
            2.客户端完成，不会请求服务器处理
            3.sessionStorage数据是不共享、 localStorage共享

sessionStorage：

            作用于当前的页面，新开页面或者关闭页面时候，数据消失；

localStorage：

   当数据有修改或删除的情况下，就会触发storage事件
   在对数据进行改变的窗口对象上是不会触发的
   Key : 修改或删除的key值，如果调用clear(),key为null
   newValue  :  新设置的值，如果调用removeStorage(),key为null
   oldValue :  调用改变前的value值
   storageArea : 当前的storage对象
   url :  触发该脚本变化的文档的url
   注：session同窗口才可以,例子：iframe操作

sessionStorage方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
    <button id='addData'> 添加数据 </button>
    <button id='getData'> 获取数据 </button>
    <button id='removeData'> 删除数据 </button>
    <input type="text" id='txt'>
    <script>
         const addData = document.getElementById('addData')
         const getData = document.getElementById('getData')
         const removeData = document.getElementById('removeData')
         const txt = document.getElementById('txt')

         addData.onclick = function(){
             sessionStorage.setItem( 'key',txt.value );
         }
         getData.onclick = function(){
            let val = sessionStorage.getItem('key')
            alert( val )
         }
         removeData.onclick = function(){
            sessionStorage.removeItem('key' );
         }
    </script>
</body>
</html>

localStorage本地缓存：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <button id='addData'> 添加数据 </button>
    <button id='getData'> 获取数据 </button>
    <button id='removeData'> 删除数据 </button>
    <input type="text" id='txt'>

    <script>
         const addData = document.getElementById('addData')
         const getData = document.getElementById('getData')
         const removeData = document.getElementById('removeData')
         const txt = document.getElementById('txt')

         addData.onclick = function(){
            localStorage.setItem( 'key',txt.value );
         }
         getData.onclick = function(){
            let val = localStorage.getItem('key')
            alert( val )
         }
         removeData.onclick = function(){
            localStorage.removeItem('key' );
         }
    </script>
</body>
</html>