注意啦！Web Storage的用法都在这里了
Web Storage是HTML5中新增的除Canvas元素以外，非常非常重要的功能！没有之一！顾名思义，其就是在Web端存储数据的功能，当然这里的存储只是针对客户端本地而言的。
Web Storage的优缺点：
优点：
- 存储空间更大。在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种方法，将数据赋值给变量v
var 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种方法，将数据赋值给变量v
var v=localStorage.getItem("key");
//或
var v=localStorage.key;
//或
var v=localStorage["key"];注意事项：
- Web Storage是window对象的子对象。
//保存数据userName值为zhangpeiyue
sessionStorage.set("userName","zhangpeiyue");
//也可以写为：
window.sessionStorage.set("userName","zhangpeiyue");- localStorage.length或sessionStorage.length为相应的数据条数
//添加2条localStorage,1条sessionStorage
localStorage.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本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2018-06-07，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
相关产品与服务
对象存储
对象存储（Cloud Object Storage，COS）是由腾讯云推出的无目录层次结构、无数据格式限制，可容纳海量数据且支持 HTTP/HTTPS 协议访问的分布式存储服务。腾讯云 COS 的存储桶空间无容量上限，无需分区管理，适用于 CDN 数据分发、数据万象处理或大数据计算与分析的数据湖等多种场景。