Web Storage概述

素颜马尾好姑娘i 2022-04-15 05:59 286阅读 0赞

**Web Storage概述**  
①sessionStorage:将数据保存在sessionStorage中。指的是用户从进入网站到浏览器关闭的这段时间，session对象可以保存这段时间那内所要求保存的任何数据

function saveStorage(id){
     	var target=document.getElementById(id);
     	var str=target.value;
     	sessionStorage.setItem('message',str);
     }
    function loadStorage(id){
    	var target=document.getElementById(id);
     	var msg=sessionStorage.getItem('message');
     	target.innerHTML=msg;
     }

②localStorage:将数据保存在客户端本地的硬件设备（通常指的是硬盘，也可以是其他硬件设备），即使浏览器关闭了，该数据仍然存在，下次打开浏览器访问该网站的时候仍然可以继续使用。两者不一样的是，sessionStorage为临时存储，而localStorage为永久保存。

function saveStorage(id){
    	var target=document.getElementById(id);
    	var str=target.value;
    	localStorage.setItem('message',str);
    }
    function loadStorage(id){
    	var target=document.getElementById(id);
    	var msg=localStorage.getItem('message');
    	target.innerHTML=msg;
    }

下面就使用一个简单的html页面来展示一下

<body>
    	 <h1>web storage实例</h1>
    	 <p id="msg"></p>
    	 <input type="text" id="input">
    	 <input type="button" value="保存数据" onclick="saveStorage('input');">
    	 <input type="button" value="读取数据" onclick="loadStorage('msg');">
    </body>

代码运行结果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjcyNDE3Ng_size_16_color_FFFFFF_t_70]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjcyNDE3Ng_size_16_color_FFFFFF_t_70 1]  
最后附上函数的用法：  
①sessionStorage  
保存数据的方法：

sessionStorage.setItem('key', 'value');

读取数据的方法：

变量=sessionStorage.getItem('key');

②localStorage  
保存数据的方法：

localStorage.setItem('key', 'value');

读取数据的方法：

变量=localStorage.getItem('key');

**ps：笔者最近开通了微信公众号，大家可以关注一下哦，谢谢大家的支持！**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjcyNDE3Ng_size_16_color_FFFFFF_t_70 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjcyNDE3Ng_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20181122131339865.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjcyNDE3Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjcyNDE3Ng_size_16_color_FFFFFF_t_70 1]: /images/20220415/fa032a7c280d4154b1f5d1470184b0c2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjcyNDE3Ng_size_16_color_FFFFFF_t_70 2]: /images/20220415/600203401dfa4374b2f50513996861a8.png