html5学习(简单的本地缓存)sessionStorage、localStorage、globalStorage

- 日理万妓 2022-12-31 13:20 570阅读 0赞

> ### **html5学习(简单的本地缓存)sessionStorage、localStorage、globalStorage** ###
> 
> **我这里的globalStorage老是报错，有知道报错原因的小伙伴麻烦在评论区给我留言！**
> 
> **globalStorage报错**Uncaught ReferenceError: globalStorage is not defined
> 
> **globalStorage报错**Uncaught TypeError: window.globalStorage is undefined

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 3][]

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>html5学习(简单的本地缓存)</title>
    <link rel="stylesheet" type="text/css" href="../css/inputAndDiv.css">
    </head>
    <body style="background-color: #CCE8CF;">
    <h3>html5学习(简单的本地缓存)</h3>
    <input type="button" onclick="test();" value="测试本地缓存" /><br />
    <div id="show" style="height: 260px;">
    </div>
    用户名：<input type="text" id="name" /><br />
    密码：<input type="password" id="pass" /><br />
    是否永久保存：<input type="checkbox" id="save" /><br />
    </body>
    <script type="text/javascript">
    
    function $(elementId) {
    	return document.getElementById(elementId);
    }
    
    function test() {
    //如下这样设置cookie，如果没有设置cookie的有效时间的话，关闭浏览器，cookie会消失
    document.cookie = "age=6";
    var divNode = $("show");
    divNode.innerHTML += "<h3>cookie信息如下：</h3>" + document.cookie;
    
    //关闭浏览器，不会消失
    localStorage.setItem("hometown", "江西省赣州市于都县");
    divNode.innerHTML += "<h3>localStorage信息如下：</h3>"
    			+ localStorage.getItem("hometown");
    
    //关闭浏览器，会消失
    sessionStorage.setItem("userName", "韦小宝");
    divNode.innerHTML += "<h3>sessionStorage信息如下：</h3>"
    		+ sessionStorage.getItem("userName");
    }
    
    //
    var inputNodes = document.getElementsByTagName("input");
    var uName = inputNodes[1];
    var pass = inputNodes[2];
    var save = inputNodes[3];
    //复选框点击事件
    save.onclick = function() {
    	if (save.checked) {
    		localStorage.setItem("myName", uName.value);
    		localStorage.setItem("myPassword", pass.value);
    	}else{
    		localStorage.removeItem("myName");
    		localStorage.removeItem("myPassword");
    	}
    }
    
    //将localStorage中获取到的值自动填充到文本框中
    if (localStorage.getItem("myName") && localStorage.getItem("myPassword")) {
    	uName.value = localStorage.getItem("myName");
    	pass.value = localStorage.getItem("myPassword");
    }
    
    //以下的globalStorage一直报错，一直搞不清楚报错的原因，暂时先放一放，下次有时间再解决这个问题
    //报错Uncaught ReferenceError: globalStorage is not defined
    // globalStorage['http://127.0.0.1'].setItem("hobby","football");
    // globalStorage['http://127.0.0.1'].getItem("hobby");
    
    //报错Uncaught TypeError: window.globalStorage is undefined
    // window.globalStorage["http://127.0.0.1:8888"].key = "salary";
    // var v = window.globalStorage["http://127.0.0.1:8888"].key;
    // alert(v);
    </script>
    </html>

完！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70]: /images/20221120/83913096a40d42778be9dedd6ed519dc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2020122921530197.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201229220937185.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20201229221026566.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA==,size_16,color_FFFFFF,t_70