localStorage、sessionStorage、Cookie与Session

7个月前发布

070

一、localStorage

localStorage：浏览器提供的数据存储机制（数据持久化），可以将数据存储在浏览器上。
localStorage存储特点：
1、存储大小：5MB左右
2、存储类型：string类型
3、存储时效：长效（只要不人为删除，长久有效）
4、兼容：IE9以下不支持
5、运行环境：本地环境和服务环境均可，但存储的数据受域限制。

本质上 localStorage 是以js对象键值的形式来存储数据，所以可以使用提供的标准操作方法，也可以使用通用的对象操作。

1、 setItem(name,value)
name：表明要存储数据的名字，将来用于读取数据
value：表明要存储数据的值

localStorage.setItem( uname , 小明 );

2、getItem(name)
name：表明要读取数据的名字
如果找到了name，就返回name对应的value，否则返回null

console.log(localStorage.getItem( uname ));

3、 removeItem(name)
name：表明要删除数据的名字，如果名字存在就将对应的value删除，否则不做任何操作。

clear()：清空本地存储。

二、sessionStorage

sessionStorage：用法、方法与localStorage一模一样，唯一的区别就是存储特点上，sessionStorage存储数据的时效是会话时效，当浏览器关闭数据就会自动清除。

sessionStorage存储特点：
1、存储大小：5MB左右
2、存储类型：string类型
3、存储时效：会话时效(关闭浏览器即自动清除)
4、兼容：IE9以下不支持
5、运行环境：本地环境和服务环境均可，但存储的数据受域限制。

三、Cookie

cookie：浏览器的存储机制，功能类似于localStorage和 sessionStorage，但机制和特点与它们不同。

cookie是 document 对象的属性
string 类型

console.log(typeof document.cookie);

并没有对cookie数据进行增删改查的操作方法

1、增：需要以 key=value 格式的字符串来指定数据
特点：多次为cookie赋值并不会覆盖，而是以 ; （封号空格）将数据连接

document.cookie= uname=root ;
document.cookie= pword=123456 ;

改：当 key=value 的 key 已经在cookie中存在时，value 会覆盖之前的。

document.cookie= pword=000000 ;

删：默认 cookie 的存储时效为会话时效，也可以为cookie设置过期时间，cookie在超过过期时间后同样自动失效。

在存储 cookie 时可以为 cookie 设置过期时间

 expires=时间 
var date = new Date; //获取当前时间
date.setDate(date.getDate()+1);//设置时间为下一天的当前时刻
document.cookie =  msg=cookie; expires= +date;
date.setDate(date.getDate()-2)
document.cookie =  pword=000000; expires= +date;

查： key=value; key=value; key=value; 格式的字符串在存储数据，所以查询 cookie 中的指定数据

     //查询 uname 为例：
var cookie = document.cookie.split( ;  );//转为数组
for(var i=0;i<cookie.length;i++){
    var ck = cookie[i].split( = );
    if(ck[0]== uname ){
      console.log(ck[1]);
      break;
    }
}
 console.log(document.cookie);

cookie存储特点：
存储时效：默认会话（session）时效，可以设置过期时间
存储大小：4kb左右
存储类型：string类型
兼容：无兼容问题
运行环境：服务环境，受域限制