HTML5又给力出了个新技能——Web Storage，它可以把网页浏览器变成一对本地存储空间，包括会话Storage和localStorage（大家可以理解为帮咱们放置常用数据的小宝盒）。先说说会话Storage，它就像是个打工仔，只会在我们浏览网站的时候存在，然后一跑路就没了。接着看看localStorage，只要你不亲手删掉，里面的东西永远不会消失，真的是永不过期！
sessionStorage的基本特性
简单来说，就是在上网的时候顺手记下来的小信息那种。开着网页看得到，但是一旦关掉浏览器或者换到别的页面，这些内容也就跟着消失。这时候用它来保存一下短时间内要用的设定啊、聊天记录什么的，方便得多。
localStorage的持久化存储
比起 sessionStorage，Local Storage就牛逼多！你完全不用操心，也不用特意去清理浏览器缓冲啥的，因为它就会老老实实帮你保存在电脑里！如果有啥设好的或者要留很久的重要信息，记得选Local Storage
Web Storage与Cookie的比较
哎呦你不知道，浏览器里就藏着两大神器来存网页信息呢——Web Storage跟Cookie。虽然它们都有点像料仓，但还是有所不同滴。Cookie就像是小小的背包，东西放不多；Web Storage就大大咧咧了，就像个大仓库，宽敞又好使。每次上网Cookies总会粘在屁股后头，让人闹心。但Web Storage就机灵多了，需要时才把数据拿出来溜达。最关键是它还有好用的API，例如setItem和getItem之类的，用起起来轻松自如，就像呼吸一样自然！
浏览器对Web Storage的支持情况
你的浏览器是不是也能用HTML5 WebStorage？想知道能不能玩转localStorage和sessionStorage？超容易！就在你的源码里加上两句关键的话即可：
缩略后的代码示例如下所示：
javascript 如果你的手机有存储功能，那就这样处理一下。if(window.localStorage){ alert("浏览支持localStorage"); }else{ alert("浏览暂不支持localStorage"); } //或者 if(typeof window.localStorage == 'undefined'){ alert("浏览暂不支持localStorage"); }// 浏览器支持localStorage
} else {
// 浏览器不支持localStorage
}Web Storage的基本操作方法
sessionStorage.setItem("key", "value"); localStorage.setItem("site", "js8.in");存储数据就像玩游戏一样简单～想设置数字和按钮有啥关系？用setItem妥妥搞定；想知道哪个按键代表啥数字？用getItem立刻告诉你。忘了单个键值对咋清除？没关系，removeItem在等你。想一次性清空所有键值对？那还不是小菜一碟，一键clear分分钟帮你解决！
使用点操作符和[]进行数据存储
浏览器的存储方法现在更给力了！用点点或者方括号就能快速读出缓存数据。别再纠结那些繁琐规则了，赶快试试看！比如想把’key’存到本地怎么办？超级简单！你只需要在Javascript代码里这样写： localStorage.key = value或者 localStorage[‘key’] = value就可以轻松搞定！
var value = sessionStorage.getItem("key"); var site = localStorage.getItem("site");遍历存储的数据
听我说个事儿！你知道吗，我们JavaScript里可是有两个得力助手——本地存储（就是你电脑上那个）和会话存储，可方便我们查看和修改保存的信息了。想看看本地存储里都有些啥吗？就这么简单：
不如我们玩个小游戏，数数你能坚持到后天手机上有哪些钱。记得每过一天就得往上加点！
就保存到你的电脑里，用LocalStorage.key就好找了！
直接取储存在本地存储里的值~
sessionStorage.removeItem("key"); localStorage.removeItem("site");这么巧这里能看见关键字和值~
监听storage事件
你可能还不知道，网页存储里还有一个叫‘储存事件’的神奇功能。当保存的信息被改变时，它就像救火队员瞬间出现那样及时处理！有了这个小技巧，处理各种各样的数据变化就变得简单多了！比如，下面这段代码就是专门为搜寻储存事件而设计的哦：
sessionStorage.clear(); localStorage.clear();点击网页的那个’存储事件’按钮，就能触发这个函数哟~
“存储事件抓到了哦：”, event);
});
var storage = window.localStorage; storage.key1 = "hello"; storage["key2"] = "world"; console.log(storage.key1); console.log(storage["key2"]);storage事件对象的属性
好样滴，利用那啥key就能看到每个活动的变化过程啰！别忘了善于运用存在于旧数值和新数值中的“小秘密”来发现哪些地方改变！同时也得留意看url，这玩意儿可是跟页面跳转密切相关喔！再来说说那个存储区，它其实能够揭晓活动到底藏匿在何处哟~
总结与思考
你知道 HTML5 的网络存储功能？例如 SessionStorage 和 LocalStorage，这俩真的超级好用，让浏览器的数据管理变得轻松起来。那怎样才能提升用户体验？有啥好方法赶紧分享出来，别忘了点个赞，还可以给好友看看
var storage = window.localStorage; for (var i=0, len = storage.length; i < len; i++){ var key = storage.key(i); var value = storage.getItem(key); console.log(key + "=" + value); }原文链接：https://www.icz.com/technicalinformation/web/2024/07/18932.html，转载请注明出处~~~
评论0