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
来源: http://www.jianshu.com/p/f097e4b5edc4