web存储--webstorage详细介绍

PHP中文网

发布时间：2017-06-20 13:55:49

2404人浏览过

来源于php中文网

原创

web存储分类

客户端和服务端

认识web存储

随着web应用的发展，是的客户端存储的用途越来越多，然而实现客户端端存储的方式也是越来越多样化。最简单最兼容的方式就是cookie，但作为真正的客户端存储cookie还是存在着许许多多的弊端的。同时，各种浏览器也有属于自己的存储方式。例如，IE6以及以上版本中可以使用userData Behavior，在Firefox中可以使用globalStorage，而在Flash插件还可以使用Flash Local Storage，但是这几种方式存在着兼容性等方面的弊端，对于客户端的存储不属于最好的方式。
由于上述情况，html5中增加的了几种新的存储方式。web Database和web Storage。

各种方式存储之间的区别

认识webstorage
优点
缺点
localStorage
sessionStorage　
浏览器支持　　　　
这是html5新增的客户端存储数据的方式，提供了易于操作的api，只需要设置键值的方式即可。在每个用户域下面存储的数据大小在5M-10M。包含下面的sessionStorage和localStorage。同时，还包括web Database。　
存储的数据大小更大。
存储的数据保存在客户端，不需要与浏览器进行通信，这样可以减少我们的带宽消耗。
提供了丰富易用的API，使得开发者更加容易的开发。
使用独立的存储空间。每个域下面都有独立的存储空间，每个空间完全独立，可以避免数据的错乱（这一点其实和cookie没什么太大的区别）。　　　　
由于每个域下面存储的数据都是独立的空间，我们在一个域下面是不能使用其他域下面的数据。　
由于数据在没有我们进行主动的删除的情况下，存储的数据是一直保存在的并且数据没进行加密处理，很容易造成数据的窃取。　
localStorage是一种没有时间限制的存储方式，除非我们自己主动的清除数据不然数据是不会丢失的。　　
sessionStorage是针对session的存储方式，当我们浏览器或者操作窗口执行了关闭操作，sessionStorage存储的数据将会丢失。同时只能在同一个会话的页面中才能使用。
IE8.0以上，Firefox3.0以上，opera10.5以上，chrome3.0以上，safari4.0以上。
cookie工作原理
优点
缺点　

魔众商城系统
魔众商城系统是一个在线B2C商城系统，支持购物车、商品多分类，可以帮您快速搭建一套企业私有化的商城系统。魔众商城系统，简约不简单的在线商城系统。魔众商城系统是一个全面、高效且简约的B2C电商解决方案，专为希望在线上拓展业务、提升客户体验的企业和个人设计。以下是关于魔众商城系统的详细介绍：商品管理：系统支持轻松上传商品信息、设置价格、库存等参数，并通过精美的商品详情页

下载
cookie作为一种客户端存储的方式，主要采用的是文本存储。当有应用程序使用cookie的时候，服务器会将cookie发送到客户端，客户端进行保存。当用户进行下次访问时，会将客户端存储的cookie发送到服务器上面。在开发中，最典型的案例就是用来存储用户信息。　　
简单方便
浏览器负责发送数据
浏览器自己管理不同站点的数据，不容易发生数据的错乱等情况　　
正如上面讲到的cookie工作原理，我们通过服务端到客户端，客户端到服务器之间的通信。这样造成有的不必要的带宽消耗，同时也影响页面的加载速度导致用户的体验性变差。
存储的数据大小限制，cookie只能存储4kb大小的数据。
安全性。cookie的数据以文本的方式存在客户端上面，安全性很低，很容易造成数据被窃取。
数量限制。多数浏览器可存储的cookie数量为30-50个，也有的浏览器支持300个，而IE6只支持20个。
数据完整性。当我们客户端设置为最高安全级别的时候，我们的cookie会失效。　　　　　
cookie的优缺点
web storage的优缺点

实例代码

注意：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">window.onload =  (window.localStorage &&"userName", "张三""userName"</script>

<script type="text/javascript">window.onload =  (window.localStorage &&"userName", "hello,world!"</script>

检测当前浏览器是否支持

    <script type="text/javascript">// 验证当前的浏览器是否支持localStorage和sessionStoragewindow.onload = function(){if (window.localStorage && window.sessionStorage) {alert("你的浏览器支持localStorage和sessionStorage");
            }
        }</script>

H5页面制作有必要学习吗

H5页面制作的未来发展

学习Web开发，先学H5还是JS？

H5和JS谁出现得更早？

H5和小程序的交互设计有什么区别

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：如何绘制路径-线段下一篇：音乐播放器的制作实例（html5）

作者最新文章

小米笔记本重装系统的方法

2024-07-12 05:54

Thinkpad如何重装系统

2024-07-12 05:55