sessionStorage 、localStorage 和 cookie

angularjs中使用sessionStorage

 app.factory('locals', ['$window', function ($window) {return {        //存储单个属性set: function (key, value) {$window.sessionStorage[key] = value;},        //读取单个属性get: function (key, defaultValue) {return $window.sessionStorage[key] || defaultValue;},        //存储对象，以JSON格式存储setObject: function (key, value) {$window.sessionStorage[key] = JSON.stringify(value);//将对象以字符串保存},        //读取对象getObject: function (key) {return JSON.parse($window.sessionStorage[key] || '{}');//获取字符串并解析成对象}}}]);

angularjs中使用localStorage

 //=========本地存储数据服务============app.factory('locals', ['$window', function ($window) {return {        //存储单个属性set: function (key, value) {$window.localStorage[key] = value;},        //读取单个属性get: function (key, defaultValue) {return $window.localStorage[key] || defaultValue;},        //存储对象，以JSON格式存储setObject: function (key, value) {$window.localStorage[key] = JSON.stringify(value);//将对象以字符串保存},        //读取对象getObject: function (key) {return JSON.parse($window.localStorage[key] || '{}');//获取字符串并解析成对象}}}]);

localStorage和sessionStorage使用方法完全相同。
参考： angularjs 本地数据存储LocalStorage

概念：

localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。

他们均只能存储字符串类型的对象（虽然规范中可以存储其他原生类型的对象，但是目前为止没有浏览器对其进行实现）。

localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。

sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。

不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是，页面及标签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。

同源的判断规则：

http://www.test.comhttps://www.test.com （不同源，因为协议不同）http://my.test.com（不同源，因为主机名不同）http://www.test.com:8080（不同源，因为端口不同）

localStorage和sessionStorage使用时使用相同的API：

localStorage.setItem("key","value");
//以“key”为名称存储一个值“value”
localStorage.getItem("key");
//获取名称为“key”的值sessionStorage.getItem(key)
//---- 获取指定key的本地存储的值
sessionStorage.setItem(key,value)
//---- 将value存储到key字段中
sessionStorage.removeItem(key)
//---- 删除指定ke的本地存储的值
sessionStorage.length
//---- sessionStorage的项目数

枚举localStorage的方法：

for(var i=0;i<localStorage.length;i++){var name = localStorage.key(i);var value = localStorage.getItem(name);}

删除localStorage中存储信息的方法：

localStorage.removeItem("key");
//删除名称为“key”的信息。localStorage.clear();
//清空localStorage中所有信息
//----删除所有同源的本地存储的localStorage数据sessionStorage.clear();
//----只清空当前会话存储的数据

通过getItem或直接使用localStorage[“key”]获取到的信息均为实际存储的副本。

例如：

localStorage.key = {value1:"value1"};localStorage.key.value1='a';

这里是无法对实际存储的值产生作用的，下面的写法也不可以：

localStorage.getItem("key").value1="a";

localStorage和sessionStorage区别

详说 Cookie, LocalStorage 与 SessionStorage

cookie、 sessionStorage 、localStorage之间的区别和使用

1、与服务器通信不同

cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递；cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题。
sessionStorage、localStorage仅在客户端（即浏览器）中保存，不参与和服务器的通信。

2、存储大小限制不同

cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。
而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

3、作用域不同

sessionStorage在不同的浏览器窗口中不共享，即使是同一个页面；
localStorage 在所有同源窗口中都是共享的；
cookie也是在所有同源窗口中都是共享的。
Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。

4、数据有效期不同

sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；将数据存到 session中，管你前进后退还是刷新，数据依然在，关闭窗口后再进页面才会清空数据。
localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；只要不清除数据，第二天、第二周或下一年之后，数据依然可用。
cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。

除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。

但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在，而Web Storage仅仅是为了在本地“存储”数据而生

Cookie和Session 的区别：

1）cookie数据存放在客户的浏览器上，session数据放在服务器上。

2）cookie不是很安全，别人可以分析存放在本地的cookie并进行cookie欺骗，考虑到安全应当使用session。

3）session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能考虑到减轻服务器性能方面，应当使用cookie。

4）单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。

5）所以建议：
将登陆信息等重要信息存放为SESSION
其他信息如果需要保留，可以放在cookie中

Javascript本地存储小结

同源

一个URL由四部分组成，拿 www.2cto.com 来说（http的默认端口是80，https的默认端口是443。如果是默认端口，可以省略，所以这个URL等价www.2cto.com:80

参考：Http协议默认端口号为（）

(协议)：//(主机名)：(端口号)/(路径)

http://www.2cto.com/kf/201201/117546.html协议：http
主机：www.2cto.com
端口：80
路径：/

所谓的同源就是要求这个URL的协议，主机，端口三部分都相同。一般我们说的域或者domain也是这里的源的概念。

是否同源示例：

http://blog.csdn.net/xilang/index.html
//是  http://blog.csdn.net/yanical/othersub
//是https://blog.csdn.net/yanical
//否 协议不同http://blog.csdn.net:81/yanical
//否 端口不同http://www.csdn.net/
//否 主机不同