sessionStorage 、localStorage 和 cookie
来源:互联网 发布:智能手机文件加密软件 编辑:程序博客网 时间:2024/05/22 13:30
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之间的区别和使用
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中
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/ //否 主机不同
- sessionstorage,localstorage和cookie
- sessionStorage 、localStorage 和 cookie
- sessionStorage 、localStorage 和 cookie
- sessionStorage、localStorage和cookie
- 浅谈cookie、sessionStorage 和 localStorage
- localStorage sessionStorage和cookie区别
- sessionStorage 、localStorage 和 cookie比较
- cookie和sessionStorage,localStorage区别
- cookie和sessionStorage和localStorage的区别
- sessionStorage 、localStorage 和 cookie 之间的区别
- sessionstorage,localstorage和cookie之间的区别
- cookie,localStorage和sessionStorage三兄弟
- sessionStorage localStorage 和 cookie 的区别
- cookie、sessionStorage和localStorage的区别
- sessionStorage 、localStorage 和 cookie 之间的区别
- cookie与HTML5的localStorage和sessionStorage
- sessionStorage localStorage 和 cookie 之间的异同
- sessionStorage 、localStorage 和 cookie 之间的区别
- 前端开源项目周报0418
- Centos7 下 top 使用说明
- C# 常用数据操作辅助类 SqlDbHelper.cs
- 串口通信4月18号
- codecomebat游戏代码--边缘地区的森林
- sessionStorage 、localStorage 和 cookie
- 深入理解Spring MVC 思想
- bzoj3781 小B的询问 莫队
- Git 概念
- 10、uboot移植——使用官方uboot进行移植(2)
- 98. Validate Binary Search Tree
- 君正超低功耗电池wifi可视门铃方案
- linux下利用crontab创建定时任务
- Easy 16 Sqrt(x)(69)