存储 angularjs
1、定义服务
//=========本地存储数据服务============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] || '{}');//获取字符串并解析成对象}}}]);
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
2、controller中调用:
先注入服务,再set get
app.controller('supplyAddCtrl', function ($scope, $http, $location, locals, $timeout, $compile) {//存locals.set("firstpos", firstpos);//字符串locals.setObject("secondpos", secondpos);//对象//取locals.get("firstpos");locals.getObject("secondpos");}
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] || '{}');//获取字符串并解析成对象}}}]);
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
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] || '{}');//获取字符串并解析成对象}}}]);
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
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(不同源,因为端口不同)
- 1
- 2
- 3
- 4
- 5
- 6
- 7
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的项目数
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
枚举localStorage的方法:
for(var i=0;i<localStorage.length;i++){var name = localStorage.key(i);var value = localStorage.getItem(name);}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
删除localStorage中存储信息的方法:
localStorage.removeItem("key");
//删除名称为“key”的信息。localStorage.clear();
//清空localStorage中所有信息
//----删除所有同源的本地存储的localStorage数据sessionStorage.clear();
//----只清空当前会话存储的数据
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
通过getItem或直接使用localStorage[“key”]获取到的信息均为实际存储的副本。
例如:
localStorage.key = {value1:"value1"};localStorage.key.value1='a';
- 1
- 2
- 3
这里是无法对实际存储的值产生作用的,下面的写法也不可以:
localStorage.getItem("key").value1="a";
- 1
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协议默认端口号为( )
(协议)://(主机名):(端口号)/(路径)
- 1
http://www.2cto.com/kf/201201/117546.html协议:http
主机:www.2cto.com
端口:80
路径:/
- 1
- 2
- 3
- 4
- 5
- 6
所谓的同源就是要求这个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/
//否 主机不同
存储 angularjs相关推荐
- ASP.NET MVC下使用AngularJs语言(一):Hello your name
新春节后,分享第一个教程. 是教一位新朋友全新学习ASP.NET MVC下使用AngularJs语言. 一,新建一个空的Web项目.使用NuGet下载AngularJs和jQuery. 二,配置Bun ...
- AngularJS和DataModel
通常,在AngularJS中使用JSON作为存储数据的模型.我们可能这样在controller中写model: app.controller('BookController',['$scope',fu ...
- [转]如果我有jQuery背景,我应该如何切换到AngularJS的思维模式?
导言 stackoverflow上有一个人问了一个问题:如果我有jQuery背景,我应该如何切换到AngularJS的思维模式? 有一个回复非常经典,获得了两千多票. 为了让国内开发者也能领略到其中的 ...
- 在 Azure 中的 Linux VM 上创建 MongoDB、Express、AngularJS 和 Node.js (MEAN) 堆栈
本教程介绍如何在 Azure 中的 Linux VM 上实现 MongoDB.Express.AngularJS 和 Node.js (MEAN) 堆栈. 通过创建的 MEAN 堆栈,可以在数据库中添 ...
- 前端每周清单第 50 期: AngularJS and Long Term Support, Web 安全二三论
前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点:分为新闻热点.开发教程.工程实践.深度阅读.开源项目.巅峰人生等栏目.欢迎关注[前端之巅]微信公众号(ID: fron ...
- 理解AngularJS的作用域Scope
为什么80%的码农都做不了架构师?>>> 理解AngularJS的作用域Scope https://github.com/angu- 08-02 22:45 10-14 09: ...
- AngularJS基本知识点
AngularJS 是一个 MV* 框架,最适于开发客户端的单页面应用.它不是个功能库,而是用来开发动态网页的框架.它专注于扩展 HTML 的功能,提供动态数据绑定(data binding),而且它 ...
- AngularJS 指令实践
2019独角兽企业重金招聘Python工程师标准>>> 指令(Directives)是所有AngularJS应用最重要的部分.尽管AngularJS已经提供了非常丰富的指令,但还是经 ...
- AngularJS:为什么ng-bind在角度上优于{{}}?
本文翻译自:AngularJS : Why ng-bind is better than {{}} in angular? I was in one of the angular presentati ...
- 如果我有jQuery背景,那么“ AngularJS中的思考”吗? [关闭]
已关闭 . 这个问题需要更加集中 . 它当前不接受答案. 想改善这个问题吗? 更新问题,使其仅通过编辑此帖子来关注一个问题. 4年前关闭. 已锁定 . 该问题及其答案被锁定,因为该问题是题外话,但具有 ...
最新文章
- 安装Axis2的eclipse插件后,未出现界面
- 家用电脑配置_游戏搬砖必看教程,游戏工作室电脑如何配置
- Tensorflow No module named ‘tensorflow.examples.tutorials‘解决办法,有用
- iPad开发(Universal Applications)
- python opencv 教程_OpenCV-Python系列教程介绍
- networkx 有向图强连通_基于networkx分析Louvain算法的社团网络划分
- 微信小程序使用weui设计界面
- Mixly(米思齐)图形化编程工具
- Arm 公司推出了 Mbed linux OS
- RTL8201-RMII电路
- 什么是云平台,云平台的分类和优势有哪些?
- DNS系统(服务器)的工作原理及攻击防护
- riak数据库php7,Riak (Engine)
- 聘用人员职务犯罪要如何处理
- Unity 骨骼动画 Anima2D
- 解线性方程组的直接方法:LU分解法及其C语言算法实现
- Python课程内容回顾
- 【解决】ImportError: {} doesn‘t contains class named ‘Exp‘
- Unity HybridRender 视锥体裁剪
- 【电路】(1)串联式开关电源