localStorage sessionStorage的使用:
与cookie相比,webStorage有很多优势(如本文结尾),所以在选择的时候,优先选择webStorage!
sessionStorage使用方法完全同localStorage一致,不同之处:
localStorage:没有时间限制的数据存储,类似于cookie,一直存在,直到用户清除数据;
sessionStorage只针对一个 session 的数据存储,关闭当前网页/窗口就会消失;
if(typeof(Storage)!=="undefined")
{
// 是的! 支持 localStorage sessionStorage 对象!
// console.log('支持');
//增
//数字
localStorage.setItem("age",28);
//字符串
localStorage.setItem('name','guo');
localStorage.setItem('lastname','jayson');
//数组
localStorage.setItem('skills',['html','js','css']);
//或者使用如下方式增/改/查
// var name='guo';
// localStorage.name=name;
// var lsName=localStorage.name;
//删
localStorage.removeItem('name');
// localStorage.clear();
//改
localStorage.setItem('age',29);
//查
var lsAge=localStorage.getItem("age");
var lsLastname=localStorage.getItem("lastname");
//遍历所有的item
for(var i=0;i<localStorage.length;i++){
var lsName=localStorage.key(i);
var lsValue=localStorage.getItem(lsName);
// console.log(lsValue);
}
//存储对象(集合)的处理
var o = {
// x:1,
// y:2
name:'jayson',
age:27
};
var oStr = JSON.stringify(o); //由于存储的内容都是字符串,序列化对象
localStorage.setItem("o",oStr);
localStorage.getItem("o"); //{"x":1} typeof类型:string
var one=JSON.parse(localStorage.getItem("o")).name; //反序列化
var two=JSON.parse(localStorage.getItem("o")).age;
// console.log(one);
// console.log(two);
// 识别使用哪种存储机制
var memory = window.localStorage || (window.UserDataStorage && new UserDataStorage()) || new CookieStorage();
// 然后在对应机制中获取数据
var memName=memory.getItem("name");
// console.log(memName);
} else {
// 抱歉! 不支持 web 存储。
console.log('不支持');
}
与Cookie相比,Web Storage存在不少的优势,概括为以下几点:
-
存储空间更大:IE8下每个独立的存储空间为10M,其他浏览器实现略有不同,但都比Cookie要大很多。
-
存储内容不会发送到服务器:当设置了Cookie后,Cookie的内容会随着请求一并发送的服务器,这对于本地存储的数据是一种带宽浪费。而Web Storage中的数据则仅仅是存在本地,不会与服务器发生任何交互。
-
更多丰富易用的接口:Web Storage提供了一套更为丰富的接口,使得数据操作更为简便。
-
独立的存储空间:每个域(包括子域)有独立的存储空间,各个存储空间是完全独立的,因此不会造成数据混乱。