web存储之webstorage
2023-05-30 07:51:35 阅读次数:83
web,存储
- 随着web应用的发展,是的客户端存储的用途越来越多,然而实现客户端端存储的方式也是越来越多样化。最简单最兼容的方式就是cookie,但作为真正的客户端存储cookie还是存在着许许多多的弊端的。同时,各种浏览器也有属于自己的存储方式。例如,IE6以及以上版本中可以使用userData Behavior,在Firefox中可以使用globalStorage,而在Flash插件还可以使用Flash Local Storage,但是这几种方式存在着兼容性等方面的弊端,对于客户端的存储不属于最好的方式。
- 由于上述情况,html5中增加的了几种新的存储方式。web Database和web Storage。
- cookie作为一种客户端存储的方式,主要采用的是文本存储。当有应用程序使用cookie的时候,服务器会将cookie发送到客户端,客户端进行保存。当用户进行下次访问时,会将客户端存储的cookie发送到服务器上面。在开发中,最典型的案例就是用来存储用户信息。
- 简单方便
- 浏览器负责发送数据
- 浏览器自己管理不同站点的数据,不容易发生数据的错乱等情况
- 正如上面讲到的cookie工作原理,我们通过服务端到客户端,客户端到服务器之间的通信。这样造成有的不必要的带宽消耗,同时也影响页面的加载速度导致用户的体验性变差。
- 存储的数据大小限制,cookie只能存储4kb大小的数据。
- 安全性。cookie的数据以文本的方式存在客户端上面,安全性很低,很容易造成数据被窃取。
- 数量限制。多数浏览器可存储的cookie数量为30-50个,也有的浏览器支持300个,而IE6只支持20个。
- 数据完整性。当我们客户端设置为最高安全级别的时候,我们的cookie会失效。
- 这是html5新增的客户端存储数据的方式,提供了易于操作的api,只需要设置键值的方式即可。在每个用户域下面存储的数据大小在5M-10M。包含下面的sessionStorage和localStorage。同时,还包括web Database。
- 存储的数据大小更大。
- 存储的数据保存在客户端,不需要与浏览器进行通信,这样可以减少我们的带宽消耗。
- 提供了丰富易用的API,使得开发者更加容易的开发。
- 使用独立的存储空间。每个域下面都有独立的存储空间,每个空间完全独立,可以避免数据的错乱(这一点其实和cookie没什么太大的区别)。
- 由于每个域下面存储的数据都是独立的空间,我们在一个域下面是不能使用其他域下面的数据。
- 由于数据在没有我们进行主动的删除的情况下,存储的数据是一直保存在的并且数据没进行加密处理,很容易造成数据的窃取。
- localStorage是一种没有时间限制的存储方式,除非我们自己主动的清除数据不然数据是不会丢失的。
- sessionStorage是针对session的存储方式,当我们浏览器或者操作窗口执行了关闭操作,sessionStorage存储的数据将会丢失。同时只能在同一个会话的页面中才能使用。
- IE8.0以上,Firefox3.0以上,opera10.5以上,chrome3.0以上,safari4.0以上。
<script type="text/javascript">
// 验证当前的浏览器是否支持localStorage和sessionStorage
window.onload = function(){
if (window.localStorage && window.sessionStorage) {
alert("你的浏览器支持localStorage和sessionStorage");
}
}
</script>
- 注意:localStorage和sessionStorage存储的都是字符串对象。
- 创建
<script type="text/javascript">
// 创建均使用localStorage做示例,sessionStorage语法方式和localStorage是一样的,localStorage(key, value);或者localStorage.key = "value";
window.onload = function(){
if (window.localStorage) {
localStorage.setItem("userName", "张三");
}
}
</script>
<script type="text/javascript">
// 可以直接使用localStorage.getItem(key);也可以使用localStorage.key;
window.onload = function(){
if (window.localStorage && window.sessionStorage) {
localStorage.setItem("userName", "张三");
alert(localStorage.getItem("userName"));
}
}
</script>
<script type="text/javascript">
// localStorage.removeItem(key):根据键名删除指定存储,localStorage.clear():删除指定所有存储,当Storage对象为空时,也是可执行的。
window.onload = function(){
if (window.localStorage && window.sessionStorage) {
localStorage.setItem("userName", "hello,world!");
localStorage.removeItem("userName");
localStorage.clear();
}
}
</script>
版权声明:本文内容来自第三方投稿或授权转载,原文地址:https://blog.51cto.com/u_10992108/5984711,作者:7small7,版权归原作者所有。本网站转在其作品的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如因作品内容、版权等问题需要同本网站联系,请发邮件至ctyunbbs@chinatelecom.cn沟通。
上一篇:Kafka存储在Zookeeper中的数据
下一篇:SQLSERVER存储过程语法详解