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.com
https://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";
详说 Cookie, LocalStorage 与 SessionStorage
cookie、 sessionStorage 、localStorage之间的区别和使用
sessionStorage 、localStorage 和 cookie 之间的区别
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中
同源
一个URL由四部分组成,拿 www.2cto.com 来说(http的默认端口是80,https的默认端口是443。如果是默认端口,可以省略,所以这个URL等价www.2cto.com:80
(协议)://(主机名):(端口号)/(路径)
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/
//否 主机不同