本地数据存储之Web Storage_web storage数据-CSDN博客

本文链接：https://blog.csdn.net/qq_34550459/article/details/105941218

HTML5的Web Storage 提供了两种在客户端存储数据的方法:
localStorage和sessionStorage。它们可以键值对的形式在本地保存数据

localStorage:
用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。
sessionStorage:
保存会话期内数据,当用户关闭浏览器后,则这些数据会被删除。

Web Storage 优点如下:
存储空间更大(相比于cookie)
存储内容不会发送到服务器
提供一套更为丰富的接口,使得数据操作更为简便
每个域(包括子域)都有独立的存储空间,各个存储空间是完全独立的,
不会造成数据数据混乱。

缺陷主要集中在安全性方面:
浏览器会为每个域分配独立的存储空间,但是浏览器不会检查javascript脚本所在的域与当前域是否相同。
存储在本地的数据未加密而且永远不会过期,极易造成隐私泄露。

目前所有主流浏览器都支持Web Storage.

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>本地存储之localStorage</title>
</head>

<body>
  请输入您的用户名: <input type="text" name="username" id="username">
    <button class="set">存储数据</button>
    <button class="get">获取数据</button>
    <button class="remove">删除数据</button>
    <button class="del">清空所有数据</button>
    <script>
        window.addEventListener('load',function(){
            
            var setBtn=document.querySelector('.set');
            var getBtn=document.querySelector('.get');
            var removeBtn=document.querySelector('.remove');
            var delBtn=document.querySelector('.del');
            var inputElement=document.querySelector("input[type='text']");

            var inputVal;
            setBtn.addEventListener('click',function(){
                inputVal=inputElement.value;
                //将指定的键值对存储到用户的浏览器中(localStorage
                localStorage.setItem('username',inputVal);
                localStorage.setItem('password',inputVal);
               
            });

            getBtn.addEventListener('click',function(){
                
                //使用localStorage获取存储的数据
                //根据指定的key获取对应的value值
                console.log(localStorage.getItem('username'));

                
            });

            removeBtn.addEventListener('click',function(){
                //将数据从localStorage中移除
                localStorage.removeItem('username');
                
            });

            delBtn.addEventListener('click',function(){
                //清除localStorage中的所有数据
                localStorage.clear();
                
            });
        });-
    </script>
</body>
</html>

F12查看是否已在当前浏览器中存储了:
在这里插入图片描述
本地存储之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>本地存储之sessionStorage</title>
</head>

<body>
  请输入您的用户名: <input type="text" name="username" id="username">
    <button class="set">存储数据</button>
    <button class="get">获取数据</button>
    <button class="remove">删除数据</button>
    <button class="del">清空所有数据</button>
    <script>
        window.addEventListener('load',function(){
            
            var setBtn=document.querySelector('.set');
            var getBtn=document.querySelector('.get');
            var removeBtn=document.querySelector('.remove');
            var delBtn=document.querySelector('.del');
            var inputElement=document.querySelector("input[type='text']");

            var inputVal;
            setBtn.addEventListener('click',function(){
                inputVal=inputElement.value;
                //将指定的键值对存储到用户的浏览器中(sessionStorage)
                sessionStorage.setItem('username',inputVal);
                sessionStorage.setItem('password',inputVal);
            });

            getBtn.addEventListener('click',function(){
                
                //使用sessionStorage获取存储的数据
                //根据指定的key获取对应的value值
                // console.log(sessionStorage.getItem('username'));

                //获取跨页面存储的数据
                console.log(localStorage.getItem('username'));
                
            });

            removeBtn.addEventListener('click',function(){
                //将数据从sessionStorage中移除
                sessionStorage.removeItem('username');
            });

            delBtn.addEventListener('click',function(){
                //清除sessionStorage中的所有数据
                sessionStorage.clear();
            });
        });
    </script>
</body>
</html>