Web Storage的用法

概述优点： 存储空间更大。在IE下每个独立存储空间为10M，其它浏览器存储空间略有不同，但可以肯定的是至少要比cookie要大很多。 存储内容不会与服务器发生任何交互，数据仅仅单纯地存储在本地。不用担心对服务器数据的影响！ 独立的存储空间，每个域都有自己独立的存储空间，各个存储空间又完全是独立的，所以不会对数据千万混乱。 缺点： 存储在本地的数据未加密且永远不会过期，容易造成隐私泄漏！ 存储的数据类型

优点：
存储空间更大。在IE下每个独立存储空间为10M，其它浏览器存储空间略有不同，但可以肯定的是至少要比cookie要大很多。
存储内容不会与服务器发生任何交互，数据仅仅单纯地存储在本地。不用担心对服务器数据的影响！
独立的存储空间，每个域都有自己独立的存储空间，各个存储空间又完全是独立的，所以不会对数据千万混乱。
缺点：
存储在本地的数据未加密且永远不会过期，容易造成隐私泄漏！
存储的数据类型只能是字符串！

localstorage与sessionStorage
localstorage与sessionStorage是Web Storage提供的两种存储在客户端的方法。
localstorage：没有时间限制的存储方式。存储的时间可以是一天，二天，几周或几十年！关闭浏览器数据不会随着消失，当再次打开浏览器时，数据依然可以访问！也就是说除非你主动删除数据，否则数据是永远不会过期的。
sessionStorage：保存在session对象当中。用来保存的时间为用户与浏览器的会话时间。即从浏览页面到关闭浏览器为一个会话时间。关闭浏览器，所有的 session数据也会消失！
* localstorage是永久保存数据，sessionStorage是暂时保存数据，这是两者之间的重要区别！

sessionStorage设置和获取数据

//保存数据有3种方法：sessionStorage.setItem("key","value");//或sessionStorage.key="value";//或sessionStorage["key"]="value";//读取数据的3种方法，将数据赋值给变量vvar v=sessionStorage.getItem("key");//或var v=sessionStorage.key;//或var v=sessionStorage["key"];

　　

localstorage设置和获取数据

//保存数据有3种方法：localstorage.setItem("key","value");//或localstorage.key="value";//或localstorage["key"]="value";//读取数据的3种方法，将数据赋值给变量vvar v=localstorage.getItem("key");//或var v=localstorage.key;//或var v=localstorage["key"];

　　

注意事项： Web Storage是window对象的子对象。

//保存数据username值为zhangpeiyuesessionStorage.set("username","zhangpeiyue");//也可以写为：window.sessionStorage.set("username","zhangpeiyue");

localstorage.length或sessionStorage.length为相应的数据条数

//添加2条localstorage,1条sessionStoragelocalstorage.a=1;localstorage.b=2;sessionStorage.a=3;console.log(localstorage.length);//2  console.log(sessionStorage.length);//1

localstorage.key(index)：将数据的索引值作为参数传入，可以得到localstorage中与这个索引号相对应的数据。sessionStorage.key(index)同理！

localstorage.username="zhangpeiyue";    localstorage.age=18;    console.log(localstorage.key(0));//age    console.log(localstorage[localstorage.key(0)]);//18    console.log(localstorage.key(1));//username    console.log(localstorage[localstorage.key(1)]);//zhangpeiyue

　

localstorage.removeItem(“key”):清除指定的localstorage数据。 sessionStorage.removeItem(“key”):清除指定的localstorage数据。

 localstorage.username="zhangpeiyue";    localstorage.age=18;   //移除key为username的数据    localstorage.removeItem("username");    console.log(localstorage.username);//undefined    console.log(localstorage.age);//18

localstorage.clear()：清除所有保存在localstorage的数据。sessionStorage.clear():清除所有保存在sessionStorage的数据

  localstorage.username="zhangpeiyue";    localstorage.age=18;    console.log(localstorage.username);//zhangpeiyue    console.log(localstorage.age);//18    localstorage.clear();//清除所有localstorage的数据    console.log(localstorage.username);//undefined    console.log(localstorage.age);//undefined

总结

以上是内存溢出为你收集整理的Web Storage的用法全部内容，希望文章能够帮你解决Web Storage的用法所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。