最近从ng1  转ng2     相信 使用ng1的同学都知道 ngStorage 这个插件吧,  存储 本地数据

下面介绍一下 ng2 使用 localStorage

参考

github

https://github.com/marcj/angular2-localstorage

使用方法

1 nodejs 下载  npm install --save angular2-localstorage

2 引入到AppModule

import {Component} from "angular2/core";
import {WebStorageModule, LocalStorageService} from "angular2-localstorage"; @NgModule({
import: [WebStorageModule]
@Component({
providers: [LocalStorageService]
})
export class AppModule {}

3 组件中使用

import {LocalStorage, SessionStorage} from "angular2-localstorage/WebStorage";

class MySuperComponent {
@LocalStorage() public lastSearchQuery:Object = {};
@LocalStorage('differentLocalStorageKey') public lastSearchQuery:Object = {};
}

注意:在您正在使用的属性上始终定义默认值@LocalStorage

注意:localstorage键是默认的属性名称。定义@LocalStorage设置不同的第一个参数。

注意:请不要存储循环结构,因为此库在使用LocalStorage之前使用JSON.stringify进行编码。

注意:localstorage 后 再次刷新页面的时候,会先去 读取本地资源值,给属性赋值

举个栗子

@Component({
selector: 'app-login',
template: `
<form>
<div>
<input type="text" [(ngModel)]="username" placeholder="Username" />
<input type="password" [(ngModel)]="password" placeholder="Password" />
</div> <input type="checkbox" [(ngModel)]="rememberMe" /> Keep me logged in <button type="submit">Login</button>
</form>
`
})
class AppLoginComponent {
//here happens the magic. `username` is always restored from the localstorage when you reload the site
@LocalStorage() public username:string = ''; public password:string; //here happens the magic. `rememberMe` is always restored from the localstorage when you reload the site
@LocalStorage() public rememberMe:boolean = false;
}
@Component({
selector: 'admin-menu',
template: `
<div *ngFor="#menuItem of menuItems() | mapToIterable; #i = index">
<h2 (click)="hiddenMenuItems[i] = !!!hiddenMenuItems[i]">
{{i}}: {{category.label}}
</h2>
<div style="padding-left: 15px;" [hidden]="hiddenMenuItems[i]">
<a href>Some sub menu item 1</a>
<a href>Some sub menu item 2</a>
<a href>Some sub menu item 3</a>
</div>
</div>
`
})
class AdminMenuComponent {
public menuItems = [{title: 'Menu1'}, {title: 'Menu2'}, {title: 'Menu3'}]; //here happens the magic. `hiddenMenuItems` is always restored from the localstorage when you reload the site
@LocalStorage() public hiddenMenuItems:Array<boolean> = []; //here happens the magic. `profile` is always restored from the sessionStorage when you reload the site from the current tab/browser. This is perfect for more sensitive information that shouldn't stay once the user closes the browser.
@SessionStorage() public profile:any = {};
}

  

angular2 localStorage的使用的更多相关文章

  1. Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数

    上一篇:Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数 之前介绍了简单的路由以及传参,这篇文章我们将要学习复杂一些的路由以及传递其他附加参数.一个好的路由系统可以使我们 ...

  2. angular2/angular4 如何通过$http的post方法请求下载二进制的Excel文件

    时间有限,废话就不多说了,直接上干货! 下面给大家介绍一下我遇到的一个坑,如果你也遇到了,那恭喜你,你一定能找到答案:angular2/angular4 如何通过$http的post方法请求下载二进制 ...

  3. Angular2学习笔记四(之Http通信)

    前言: 在这里,我描述三个场景,即系统的注册与登录,及登录后的操作: 1.注册场景,前端页面传入用户名密码,通过一个api接口传到后台,在后台对这用户及密码进行保存: 2.登录场景,前端用户传入用户名 ...

  4. Angular2入门系列教程7-HTTP(一)-使用Angular2自带的http进行网络请求

    上一篇:Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数 感觉这篇不是很好写,因为涉及到网络请求,如果采用真实的网络请求,这个例子大家拿到手估计还要自己写一个web ...

  5. Angular2学习笔记(1)

    Angular2学习笔记(1) 1. 写在前面 之前基于Electron写过一个Markdown编辑器.就其功能而言,主要功能已经实现,一些小的不影响使用的功能由于时间关系还没有完成:但就代码而言,之 ...

  6. Angular杂谈系列1-如何在Angular2中使用jQuery及其插件

    jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...

  7. Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数

    上一篇:Angular2入门系列教程-服务 上一篇文章我们将Angular2的数据服务分离出来,学习了Angular2的依赖注入,这篇文章我们将要学习Angualr2的路由 为了编写样式方便,我们这篇 ...

  8. Angular2入门系列教程4-服务

    上一篇文章 Angular2入门系列教程-多个组件,主从关系 在编程中,我们通常会将数据提供单独分离出来,以免在编写程序的过程中反复复制粘贴数据请求的代码 Angular2中提供了依赖注入的概念,使得 ...

  9. Angular2入门系列教程3-多个组件,主从关系

    上一篇 Angular2项目初体验-编写自己的第一个组件 好了,前面简单介绍了Angular2的基本开发,并且写了一个非常简单的组件,这篇文章我们将要学会编写多个组件并且有主从关系 现在,假设我们要做 ...

随机推荐

  1. XGBoost、LightGBM的详细对比介绍

    sklearn集成方法 集成方法的目的是结合一些基于某些算法训练得到的基学习器来改进其泛化能力和鲁棒性(相对单个的基学习器而言)主流的两种做法分别是: bagging 基本思想 独立的训练一些基学习器 ...

  2. eclipse 按住ctrl 按钮没有反映

    以下是修改为XML Editior打开方法Window -> Preferences -> General -> Editors -> File Associations Fi ...

  3. System包含的信息

    System类中的属性值 System.getProperty()方法大全 System.out.println("java版本号:" + System.getProperty(& ...

  4. linux_ssh

    什么是ssh? 配置文件位置:/etc/ssh/sshd_config 远程登录和为其他网络提供安全的加密数据传输协议,默认端口22,默认协议是SSH2 # 远程终端通过ssh连接服务器管理服务器 # ...

  5. EL表达式和JSTL核心标签库

    1 EL表达式 1.1 EL的概述 EL,全名为Expression Language. 主要作用: ①EL表达式主要用于替换jsp页面中的脚本表达式,以便于从各种类型的web域中检索java对象(某 ...

  6. IE各个版本的差异性

    1.IE6a.不支持png半透明图片,只能用filter实现b.不支持css的max-width.max-height.min-width.min-height其他不用说,一团糟,不过项目中还是得去兼 ...

  7. MOOC网视频下载并视频倍速播放,超简单哒,亲测可用,( •̀ ω •́ )y

    由于视频在线播放太卡,想着下载看吧~~可是这个坑爹的网站没有下载按钮,难道就不可以下载视频了吗? 小白不甘心~ 于是动手查了一下,实验很成功,估计如果会爬虫的都不用像我一样一个一个自己去下了,奈何我知 ...

  8. linux判断文件是否存在

    #!/bin/sh myPath="/var/log/httpd/" myFile="/var /log/httpd/access.log" # 这里的-x 参 ...

  9. MongoDB 基本操作学习笔记

    // 查看所有数据库 show dbs // amdin 0.000GB // local 0.000GB // 使用数据库 use admin // switched to db admin // ...

  10. python中math模块常用的方法整理

    ceil:取大于等于x的最小的整数值,如果x是一个整数,则返回x copysign:把y的正负号加到x前面,可以使用0 cos:求x的余弦,x必须是弧度 degrees:把x从弧度转换成角度 e:表示 ...