cookies，sessionStorage和localStorage的区别

小课堂【北京】

分享人：李仁

1.背景介绍

Cookie

Cookie 是小甜饼的意思。顾名思义，cookie 确实非常小，它的大小限制为4KB左右，是网景公司的前雇员 Lou Montulli 在1993年3月的发明。它的主要用途有保存登录信息，比如你登录某个网站市场可以看到“记住密码”，这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。

localStorage

localStorage 是 HTML5 标准中新加入的技术，它并不是什么划时代的新东西。早在 IE 6 时代，就有一个叫 userData 的东西用于本地存储，而当时考虑到浏览器兼容性，更通用的方案是使用 Flash。而如今，localStorage 被大多数浏览器所支持

sessionStorage

sessionStorage 与 localStorage 的接口类似，但保存数据的生命周期与 localStorage 不同。它只是可以将一部分数据在当前会话中保存下来，刷新页面数据依旧存在。但当页面关闭后，sessionStorage 中的数据就会被清空。

2.知识剖析

三者有什么区别?

3.常见问题

如何使用本地储存？

4.解决方案

localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等

setItem存储value

用途：将value存储到key字段

用法：.setItem( key, value)

代码示例：

sessionStorage.setItem("key", "value"); localStorage.setItem("site", "js8.in");

getItem获取value

用途：获取指定key本地存储的值

用法：.getItem(key)

代码示例：

var value = sessionStorage.getItem("key"); var site = localStorage.getItem("site");

removeItem删除key

用途：删除指定key本地存储的值

用法：.removeItem(key)

代码示例：

sessionStorage.removeItem("key"); localStorage.removeItem("site");

clear清除所有的key/value

用途：清除所有的key/value

用法：.clear()

代码示例：

sessionStorage.clear(); localStorage.clear();

5.更多讨论

localStorage和sessionStorage还有其他操作方法吗？

web Storage不但可以用自身的setItem,getItem等方便存取，也可以像普通对象一样用点(.)操作符，及[]的方式进行数据存储

储存数据

sessionStorage.day = days;

localStorage.day = days;

获取数据

var days = sessionStorage.day;

var days = localStorage.day;

还有一点需要注意的是：他们均只能存储字符串类型的对象

所以我们通常配合JSON使用

JSON.stringify();

JSON.parse();

6.编码实战

7.参考文献

博客园中HTMl5的sessionStorage和localStorage

http://www.cnblogs.com/yuzhongwusan/archive/2011/12/19/2293347.html

鸣谢

感谢大家观看

BY :|李仁