22_使用web存储

忘是亡心i 2022-07-16 16:28 81阅读 0赞

html5

add  
clear

<script type="text/javascript">
        /* ################存储简单的键值数据，跟cookie类似，共享相同的机制。 */
        displayData();
        var buttons = document.querySelectorAll("button");
        for (var i = 0; i < buttons.length; i++) {
            buttons[i].onclick = handlerButtonPress;
        }
        function handlerButtonPress(e) {
            switch (e.target.id) {
            case "add":
                var key = document.querySelector("#key").value;
                var value = document.querySelector("#value").value;
                localStorage.setItem(key, value);
                break;
            case "clear":
                localStorage.clear();
                //localStorage.removeItem("这里放key");
                break;
            }
            displayData();
        }
        function displayData() {
            var itemCount = localStorage.length;
            for (var i = 0; i < itemCount; i++) {
                var key = localStorage.key(i);
                var val = localStorage[key];
                //var val = localStorage.getItem(key);
                document.writeln(key + " " + val);
            }
    
        }

/\*  
\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#监听存储事件，某个文档对本地存储进行修改时会触发storage事件  
该事件不会再制造变化的文档内指派。  
url:返回制造变化的文档url  
storageArea:返回发生变化的Storage对象  
\*/  
window.onstorage = handleStorage;  
function handleStorage(e) \{  
document.writeln(e.key + ” ” + e.oldValue + ” ” + e.newValue + ” ”  
\+ e.url + ” ” + (e.storageArea == localStorage));

}
    
        /* #################使用会话存储 
        如上localStorage更改为sessionStorage即可。
        与localStorage的区别在于，
        storage事件只会在共享存储文档中触发
        对于会话存储，意味事件只会在内嵌文档中触发，譬如使用iframe
        */
    
    
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，81人围观）

还没有评论，来说两句吧...

相关阅读

相关 Web存储—sessionStorage存储

Web存储—sessionStorage存储 sessionStorage存储特点：不需要网络大小5M 会话存储(浏览器打开期间有效但是浏览器关闭自动删除)

布满荆棘的人生/ 2022年09月07日 05:50/ 0 赞/ 309 阅读

相关 Web存储—localStorage存储

Web存储—localStorage存储一、 localStorage存储特点：特点：本地存储数据的不需要网络、大小5M 、域内安全、永久存储、只要不删除，就一

布满荆棘的人生/ 2022年09月07日 05:49/ 0 赞/ 301 阅读

相关 Web存储—本地存储Cookie

一、Cookie存储存在时间最久的本地存储，这种存储方式不完全脱离网络，前后台进行交互时还是需要网络存储大小：4kb 有效期：在有效期内数据可被访问过了有效期数据

旧城等待，/ 2022年09月07日 03:44/ 0 赞/ 326 阅读

相关 jQuery web存储详解

写在本章开始前：第十七章作为独立的一章，涉及到jQuery的方方面面，是篇幅很长的一章。为了更新客户端存储（本章），特跳过十七章。（十七章将在本章完成后继续

我就是我/ 2022年08月05日 15:03/ 0 赞/ 220 阅读

相关 22_使用web存储

html5 add clear <script typ

忘是亡心i/ 2022年07月16日 16:28/ 0 赞/ 82 阅读

相关前端开发-Web存储

最近更新时间：2017年6月4日13:52:30 [《我的博客地图》][Link 1] 理论的学习为了更好的拓展知识面的广度，具体知识点的实践为了挖掘知识的深

我就是我/ 2022年06月13日 22:47/ 0 赞/ 485 阅读

相关 HTML5 Web 存储

客户端存储数据的两个对象为： \- localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。 \- sessionStorage

向右看齐/ 2022年05月19日 08:08/ 0 赞/ 282 阅读

相关使用ehcache做缓存,存储Web数据

> 如果我的博客能够帮到大家能够点个赞，关注一下，以后还会更新更过JavaWeb的高级技术，大家的支持就是我继续更新的动力。谢谢。 > 做

曾经终败给现在/ 2022年04月12日 04:28/ 0 赞/ 293 阅读

相关 web存储

[Web 存储][Web] Web Storage 介绍 Web storage 是在web上存储数据的功能，这里的存储是针对客户端来说的. 具体说分为两种:

淩亂°似流年/ 2022年02月21日 02:09/ 0 赞/ 233 阅读

相关 Web Storage 前端存储

1、Web Storage 许多小伙伴在学习前端的时候都有一个想法，自己只能写一些静态的数据，如果想动态加载数据的话，就要学习数据库，例如mysql、Sql Serve、

缺乏、安全感/ 2021年12月12日 05:51/ 0 赞/ 451 阅读