这次给大家带来怎样使用web storage存储，使用web storage存储的注意事项有哪些，下面就是实战案例，一起来看一下。
localstorage-------sessionstorage
web storage特点：
1、key--value型的简单存储形式
2、可以和其他普通的javascript对象相同的形式来进行读写操作
3、容量大-->5m（和cookie相比）--（cookie只有4kb、且发送请求时会一起带上，影响速度）
4、只能在同源的情况下才能被访问
以下用localstorage进行举例----》sessionstorage和localstorage基本相同，但是sessionstorage是基于会话的，随着窗口的关闭而消失。但是localstorage是存储在本地的数据，除了通过程序删除或者手动删除，数据是不会丢失的。
类似与普通的javascript对象，可以采用点（.）操作和[ ]中括号操作来访问属性。
如：localstorage.setitem( foo,1)  \  localstorage.foo=1  \  localstorage[foo]=1
常用的api：setitem()、getitem()、clear()。
在对象进行存储的时候，在读写的时候，需要将对象转成json字符串进行存储，引入2个函数json.stringify(obj)、json.parse(str)
如：var obj={x:1,y:2}   存储：localstorage.obj=json.stringify(obj)、读取：var obj2=localstorage.parse(localstorage.obj)。
数据的枚举：1、通过key方法和length属性遍历   2、for in 遍历
1：for (var i=0;i<localstorage.length;i++){var key=localstorage.key(i) , value=localstorage[key] ; console.log(key+":"+value);}
2：for (var key in localstorage){ if(localstorage.hasownproperty(key)){var value=localstorage[key] ; console.log(key+":"+value);} }
storage事件
在某个窗口更改了web storage的数据之后，那么就在除了更改数据的窗口之外的所以窗口触发storage事件。
window.addeventlistener('storage',function(event){ console.log(event.key) }.false);
下面列举几个常用的event事件对象的属性。
key(被更新的键名)、oldvalue(更新前的值)、newvalue(更新之后的值)、url(被更新的页面的url)
命名空间的管理----由于localstorage的数据不对自动消失，如果胡乱的添加过多的属性，就会导致后续的管理变得十分困难。我们可以通过命名空间来进行管理。
<span style="white-space:pre"> </span>var servicename=servicename,storage=null; //通过load事件读取数据至本地变量 window.onload=function(){ try{ storage=json.parse(localstorage[servicename] || '{}'); }catch{ storage={}; } } //通过onbeforeunload时间将数据写入localstorage window.onbeforeunload=function(){ localstorage[servicename]=json.stringify(storage) }1、将localstorage的数据写到本地变量storage中，那么对其的访问速度会比访问localstroage的速度块。
2、不同页面或者不同模块分别以不同的servicename命名，进而避免属性名冲突
3、由于一次页面只对localstorage读写了一次，所以在页面中无法触发storage事件。所以在必要时，我们必要时需要封装方法来对localstorage数据进行更新，或者同步其他标签页的数据。
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
如何使用源生css3实现圆环加载进度条
如何访问js的对象属性与方法
以上就是怎样使用web storage存储的详细内容。