前端存储技术详解-优快云博客

本文链接：https://blog.youkuaiyun.com/sweetllh/article/details/76339023

本文深入探讨了前端存储技术，包括Cookie、sessionStorage和localStorage的区别与应用。详细介绍了这些技术的数据存储方式、容量限制及如何在网页中实现数据的读取与写入。并通过实例展示了如何利用localStorage实现用户数据的持久化存储。

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

Cookie
数据存储到计算机中，通过浏览器控制添加与删除数据
Cookie的特点
存储限制
域名100个cookie,每组值大小4KB
客户端、服务器端，都会请求服务器（头信息）
页面间的cookie是共享

Storage
sessionStorage
session临时回话，从页面打开到页面关闭的时间段
窗口的临时存储，页面关闭，本地存储消失

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            window.onload=function(){
                var aIputs=document.getElementsByTagName('input');
                //sessionStorage临时存储

                aIputs[0].onclick=function(){
                    window.sessionStorage.setItem('name',aIputs[3].value);
                }

                aIputs[1].onclick=function(){
                    var a=window.sessionStorage.getItem('name');
                    alert(a);
                }

                aIputs[2].onclick=function(){
                    //window.sessionStorage.removeItem('name');
                    window.sessionStorage.clear();
                }
            }
        </script>
    </head>
    <body>
        <input type="button" name="" id="" value="设置" />
        <input type="button" name="" id="" value="获取" />
        <input type="button" name="" id="" value="删除" />
        <input type="text" name="" id="" value="" />
    </body>
</html>

localStorage
永久存储（可以手动删除数据）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            window.onload=function(){
                var aIputs=document.getElementsByTagName('input');
                //sessionStorage临时存储
                //localStorage永久存储
                aIputs[0].onclick=function(){
                    window.localStorage.setItem('name',aIputs[3].value);
                }

                aIputs[1].onclick=function(){
                    var a=window.localStorage.getItem('name');
                    alert(a);
                }

                aIputs[2].onclick=function(){
                    //window.sessionStorage.removeItem('name');
                    window.localStorage.clear();
                }
            }
        </script>
    </head>
    <body>
        <input type="button" name="" id="" value="设置" />
        <input type="button" name="" id="" value="获取" />
        <input type="button" name="" id="" value="删除" />
        <input type="text" name="" id="" value="" />
    </body>
</html>

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

Storage API
setItem():
设置数据，key\value类型，类型都是字符串
可以用获取属性的形式操作
getItem():
获取数据，通过key来获取到相应的value
removeItem():
删除数据，通过key来删除相应的value
clear():
删除全部存储的值
例子 : 保存注册信息

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            window.onload=function(){
                var ainputs=document.getElementsByTagName('input');
                var oTex=document.getElementsByTagName('textarea')[0];

                for(var i=0;i<ainputs.length;i++){
                        ainputs[i].value='';
                }
                //当浏览器关闭的时候，判断表单里面是否有内容，有的话存到永久存储里面。
                window.onunload=function(){
                    if(ainputs[0].value){
                        window.localStorage.setItem('usn',ainputs[0].value);
                    }
                    if(ainputs[1].value){
                        window.localStorage.setItem('psw',ainputs[0].value);
                    }
                    for(var i=0;i<ainputs.length;i++){
                        if(ainputs[i].checked==true){
                            window.localStorage.setItem('sex',ainputs[i].value);
                        }
                    }

                    if(oTex.value){
                        window.localStorage.setItem('inf',oTex.value);
                    }
                }

                //打开浏览器的时候，如果本地存储有内容，将内容显示到对应表单里面
                if(window.localStorage.getItem('usn')){
                    ainputs[0].value=window.localStorage.getItem('usn');
                }

                if(window.localStorage.getItem('psw')){
                    ainputs[1].value=window.localStorage.getItem('psw');
                }

                if(window.localStorage.getItem('sex')){
                    for(var i=2;i<ainputs.length;i++){
                        if(ainputs[i].value==window.localStorage.getItem('sex')){
                            ainputs[i].value=true;
                        }
                    }
                }

                if(window.localStorage.getItem('inf')){
                    oTex.value=window.localStorage.getItem('inf');
                }
            }
        </script>
    </head>
    <body>
        <form action="" method="post">
            用户名：<input type="text" id="usn"  /><br />
            密码：<input type="password" id="pwd" /><br />
            性别:<input type="radio" name="sex" value="" />男<input type="radio" name="sex" value="" />女<br />
            备注：<textarea name="" id="" cols="30" rows="10"></textarea>
            <input type="submit" value="注册"/>

        </form>
    </body>
</html>

注册页面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            window.onload=function(){
                var ousn=document.getElementById('username');
                var oPsw=document.getElementById('passw');
                var oBtn=document.getElementById('btn');
                //alert('注册成功');
                oBtn.onclick=function(){
                    window.localStorage.setItem('n1',ousn.value);
                    window.localStorage.setItem('p1',oPsw.value);
                    alert('注册成功');

                }
            }
        </script>
    </head>
    <body>
        用户名：<input type="text" name="" id="username" value="" /><br />
        密码：<input type="text" name="" id="passw" value="" /><br />
        <input type="button" name="" id="btn" value="注册" />
    </body>
</html>

登录页面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">

            window.onload=function(){
                var ousn=document.getElementById('username');
                var oPsw=document.getElementById('passw');
                var oBtn=document.getElementById('btn');
                var n1=window.localStorage.getItem('n1');
                var p1=window.localStorage.getItem('p1');
                //alert(123);
                oBtn.onclick=function(){
                    if(ousn.value==n1 && oPsw.value==p1){
                        alert('登陆成功');
                    }
                    else{
                        alert('用户名或者密码错误');
                    }
                }


            }

        </script>
    </head>
    <body>
        用户名：<input type="text" name="" id="username" value="" /><br />
        密码：<input type="text" name="" id="passw" value="" /><br />
        <input type="button" name="btn" id="btn" value="登陆" />
    </body>
</html>

多用户注册

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            window.onload=function(){
                var ousn=document.getElementById('username');
                var oPsw=document.getElementById('passw');
                var oBtn=document.getElementById('btn');
                //用户名：locname
                //密码：locpsw

                oBtn.onclick=function(){
                    var loc=window.localStorage;
                    //console.log(locname);
                    if(loc.locname){

                        loc.locname+='/'+ousn.value;
                    }
                    else{
                        loc.locname=ousn.value;
                    }

                    if(loc.locpsw){
                        loc.locpsw+='/'+ousn.value;
                    }
                    else{
                        loc.locpsw=oPsw.value;
                    }
                }
            }
        </script>
    </head>

    <body>
        <form action="" method="post">
            用户名：<input type="text" name="" id="username" value="" /><br /> 密码：
            <input type="text" name="" id="passw" value="" /><br />
            <input type="button" name="" id="btn" value="注册" />
        </form>
    </body>

</html>

多用户登录

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            window.onload=function(){
                var ousn=document.getElementById('username');
                var oPsw=document.getElementById('passw');
                var oBtn=document.getElementById('btn');
                //用户名：locname
                //密码：locpsw
                //var auser=[];
                //var apass=[];
                var auser=window.localStorage.getItem('locname').split('/');
                var apass=window.localStorage.getItem('locpsw').split('/');
                oBtn.onclick=function(){
                    if(check()){
                        alert('登录成功');
                    }else{
                        alert('登录失败')
                    }
                }
                function check(){
                    for(var i=0;i<auser.length;i++){
                        if(ousn.value==auser[i]&&oPsw.value==apass[i]){
                            return true;
                            break
                        }
                    }
                }
            }
        </script>
    </head>

    <body>
        <form action="" method="post">
            用户名：<input type="text" name="" id="username" value="" /><br /> 密码：
            <input type="text" name="" id="passw" value="" /><br />
            <input type="button" name="" id="btn" value="注册" />
        </form>
    </body>

</html>

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>

window.onload = function(){
    var aInput = document.getElementsByTagName('input');

    for(var i=0;i<aInput.length;i++){

        aInput[i].onclick = function(){

            if(this.checked){
                window.localStorage.setItem('sel',this.value);
            }
            else{
                window.localStorage.setItem('onSel',this.value);
            }

        };

    }

    window.addEventListener('storage',function(ev){  //当前页面的事件不会触发

        if( ev.key == 'sel' ){

            for(var i=0;i<aInput.length;i++){
                if( ev.newValue == aInput[i].value ){
                    aInput[i].checked = true;
                }
            }

        }
        else if( ev.key == 'onSel' ){

            for(var i=0;i<aInput.length;i++){
                if( ev.newValue == aInput[i].value ){
                    aInput[i].checked = false;
                }
            }

        }

    },false);

};

</script>
</head>

<body>
<input type="checkbox" value="香蕉" />香蕉<br />
<input type="checkbox" value="苹果" />苹果<br />
<input type="checkbox" value="西瓜" />西瓜<br />
<input type="checkbox" value="哈密瓜" />哈密瓜<br />
</body>
</html>

HTML5本地存储