大家好，我是大魔王哪吒，很高兴认识大家~~哪吒的人生信条：喜欢所学，就会有强大的动力支撑。每天学习编程，会让你离梦想更近一步。感谢每一位热爱编程的程序员。不管知识有多精彩，加入我，让那颗漂泊的心安定下来，继续前行。加油，2021加油！不要害怕做梦，但也不要只做梦，做实干家，不做空谈，求真务实。前言如果这篇文章对你有帮助，??关注+点赞??鼓励作者，你接受挑战了吗？笔芯??~知识点使用HTML5中的WebStorageAPI，可以在客户端存储更多的数据，并且可以在多个页面共享甚至同步数据。对于复杂的数据，可以使用WebSQLDatabaseAPI来完成。掌握localStorage和sessionStorage的存储方式，存储JSON对象数据，使用WebSQLDatabase的基本操作。WebStorageWebStorageAPI的属性、方法、事件。cookie可用于传输少量数据。它是一种用于在服务器和客户端之间来回发送文本值的内置机制。服务器可以根据cookie跟踪用户在不同页面的访问信息。cookie的特点：一是大小限制，cookie的大小限制在4KB以内。其次，由于带宽限制，cookie数据会在服务器和浏览器之间来回传输，所以无论你访问哪个页面都会消耗网络带宽。第三，安全隐患，因为cookies在网络上频繁传输，所以在网络上是可见的，如果不加密是安全隐患。四是操作复杂。在客户端的浏览器中，使用JavaScript操作cookie数据比较复杂。所以，如果数据量不大，需要在服务端和客户端之间频繁传输，cookies的存在就有了意义。什么是网络存储？WebStorage可以在客户端保存大量的数据。WebStorage本地存储的优点：第一，存储容量大。第二，零带宽。WebStorage中的数据只存储在本地，不与服务器进行任何交互，不存在网络带宽占用问题。三、编程接口。提供丰富的接口，使数据操作更加方便。四、独立储物空间。每个域都有独立的存储空间，每个存储空间完全独立，不会造成数据混乱。localStorage和sessionStorage包括WebStorage本地存储中的sessionStorage会话存储和localStorage本地存储。cookie和session完全是服务器端可以操作的数据，sessionStorage和localStorage完全是浏览器端可以操作的数据。Cookie和session完全继承了同一个StorageAPI，所以sessionStorage和localStorage的编程接口是一样的。sessionStorage和locatlStorage的区别在于数据存在时间范围和页面范围。sessionStorage：数据只保存到存储它的窗口或选项卡关闭，数据在构建它们的窗口或选项卡内也可见窗口或选项卡共享。检查是否支持WebStorage示例：functionCheckStorageSupport(){//监控sessionStorageif(window.sessionStorage){console.log("BrowsersupportssessionStorage");}else{console.log("浏览器不支持sessionStorage");}//监听localStorageif(window.localStorage){console.log("浏览器支持localStorage");}else{console.log("浏览器不支持localStorage");}}设置和获取Storagedata保存数据到sessionStorage：window.sessionStorage.setItem("key","value");setItem()表示保存数据的方法，从sessionStorage获取数据：value=window.sessionStorage.getItem("key");getItem()是获取保存数据的方法写的：window.sessionStorage.key="value";或者window.sessionStorage["key"]="value"获取数据的方法更直接：value=window.sessionStorage.key;或者value=window.sessionStorage["key"]使用sessionStorage和localStorage示例：functionDaDa(){window.localStorage.setItem("localKey","localVlaue");//获取console.log(window.localStorage.getItem("localKey"));window.sessionStorage.setItem("sessionKey","sessionValue");//获取console.log(window.sessionStorage.getItem("sessionKey"));}Storage接口示例：interfaceStorage{readonlyattributeunsignedlonglength;字符串？键（无符号长索引）；getterDOMStringgetItem(DOMString键);settercreatorvoidsetItem(DOMStringkey,DOMStringvalue);删除器voidremoveItem(DOMStringkey);voidclear();}length属性表示当前存储对象中存储的key/value对的个数。Storage对象同源，length属性只能反映同源key/value对的个数。key方法获取指定位置的密钥。getItem方法根据key返回对应的数据值。setItem方法将数据存储在指定键对应的位置。removeItem方法从存储对象中删除指定的键/值对。clear方法清除Storage对象中的所有数据。如果Storage对象为空，则不执行任何操作。使用Storage对象保存页面内容的示例：//将数据保存到sessionStoragefunctionSaveStorage(frm){varstorage=window.sessionStorage;storage.setItem("名称",frm.name.value);storage.setItem("age",frm.age.value);}遍历显示sessionStorage中的数据functionShow(){varstorage=window.sessionStoragevarresult="";for(vari=0;i
