开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Angular 9: LocalStorage未定义

Angular 9是一种流行的前端开发框架，用于构建现代化的Web应用程序。它基于TypeScript编程语言，并提供了丰富的工具和功能，使开发人员能够快速构建高性能、可扩展和可维护的应用程序。

LocalStorage是HTML5提供的一种用于在客户端存储数据的机制。它允许开发人员在浏览器中存储和检索键值对数据，以实现本地数据持久化。然而，在Angular 9中，当尝试访问LocalStorage时，可能会遇到"LocalStorage未定义"的错误。

这个错误通常是由于在访问LocalStorage之前未正确导入或初始化它所导致的。为了解决这个问题，可以按照以下步骤进行操作：

确保在使用LocalStorage之前正确导入它。在Angular中，可以在组件的顶部使用以下代码导入LocalStorage：
确保在使用LocalStorage之前正确导入它。在Angular中，可以在组件的顶部使用以下代码导入LocalStorage：
这里使用了ngx-pwa/local-storage库，它是一个流行的Angular库，用于简化对LocalStorage的访问。
在组件的构造函数中注入LocalStorage。在组件的构造函数中添加以下代码：
在组件的构造函数中注入LocalStorage。在组件的构造函数中添加以下代码：
这将使LocalStorage服务可用于组件。
在需要使用LocalStorage的地方，使用以下代码来存储和检索数据：
在需要使用LocalStorage的地方，使用以下代码来存储和检索数据：
这里的'key'是要存储或检索的数据的键，'value'是要存储的值。

总结： Angular 9是一种流行的前端开发框架，LocalStorage是一种用于在客户端存储数据的机制。在Angular 9中，当访问LocalStorage时，可能会遇到"LocalStorage未定义"的错误。为了解决这个问题，需要正确导入和初始化LocalStorage，并使用适当的代码来存储和检索数据。推荐使用ngx-pwa/local-storage库来简化对LocalStorage的访问。

腾讯云相关产品和产品介绍链接地址：

腾讯云前端开发服务：https://cloud.tencent.com/product/fe
腾讯云云原生服务：https://cloud.tencent.com/product/tke
腾讯云数据库服务：https://cloud.tencent.com/product/cdb
腾讯云服务器运维服务：https://cloud.tencent.com/product/cvm
腾讯云音视频服务：https://cloud.tencent.com/product/tiia
腾讯云人工智能服务：https://cloud.tencent.com/product/ai
腾讯云物联网服务：https://cloud.tencent.com/product/iotexplorer
腾讯云移动开发服务：https://cloud.tencent.com/product/mob
腾讯云存储服务：https://cloud.tencent.com/product/cos
腾讯云区块链服务：https://cloud.tencent.com/product/baas
腾讯云元宇宙服务：https://cloud.tencent.com/product/vr

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

9-angular 要点温习-2 高阶知识

自定义代码结构如下： angular.module("app",[]).directive("directiveName",function(){ return{ //通过设置项来定义...replace:true:注释使用基础的自定义完整脚本 demo-ng-directive var app = angular.module...ng-model="jia">相加:{{jia}}p> 相减:{{jian}}p> div> var app = angular.module...locationNum=9&fps=1 依赖注入（Dependency Injection，简称DI）是一种软件设计模式，在这种模式下，一个或更多的依赖（或服务）被注入（或者通过引用传递）到一个独立的对象

4213 0

手工将项目升级至 Angular 9 记录

手工将项目升级至 Angular 9 记录 Angular 最近发布了 9.0 版本，需要先将一个模板项目升级至新版本。...": { - "@angular/animations": "~8.2.14", + "@angular/animations": "~9.0.0", - "@angular/common...{ "devDependencies": { - "@angular-devkit/build-angular": "~0.803.21", + "@angular-devkit/build-angular...angular.json Angular 9 默认采用 ivy 引擎，所以应用项目 (web) 的 build 选项需要打开 aot 编译。...9 的 localize 引入了一些变化，需要导入 @angular/localize/init 文件，如果没有使用 @angular/localize ，则不需要修改。

1.8K0 0

angular9 添加IE浏览器支持

默认模板没有启用IE浏览器支持 ng serve启动项目后，用IE浏览器打开为空白页解决修改browserslist，去掉前面的not not IE 9-11 # For IE 9-11 support

7803 0

Angular 11 正式发布，放弃对IE 9、10的支持！

2、Angular 11.0.0 放弃了对 IE 9 、10 和IE移动版的支持。IE11是目前唯一一个仍由Angular支持的IE版本。...(3) 组件测试套件 (Component Test Harnesses) 在 Angular v9 中，增加了开发人员可在测试期间使用支持的 API 与 Angular Material 组件交互的方法...要在项目中启用它，请将以下部分添加到 package.json 文件，增加以下参数: "resolutions": {"webpack": "5.4.0"} 目前还需谨慎使用 (9) 代码检测工具迁移（...如果想了解更多具体的信息，可以直接上官网查看或者查看更多的变更日志，访问地址如下： https://www.angular.cn/ https://github.com/angular/angular/...blob/master/CHANGELOG.md 如果你想现在就尝试下新版本，升级到 Angular 11.0.0 ，可以执行以下命令： ng update @angular/cli @angular/

1.9K2 0

angular9 ng start正常，build部署后无法正常加载页面

angular9 本地启动项目正常，构建部署后无法正常加载页面原因 index.html默认源码中如果项目没有部署在‘/’路径上则会无法加载页面其他资源文件解决

1.1K4 0

HTML5手机APP开发入(5)

Auth0提供很多自定开发功能，等有时间了慢慢研究，这里我们先简单的实现吧登录成功后把用户信息保存到本地，这样下次就可以不用在登录了 1 import {Storage, LocalStorage}...name not found warnings 9 declare var Auth0Lock; 10 11 @Injectable() 12 export class AuthService...'; 8 import {Type} from 'angular2/core'; 9 import {AuthService} from '....export class MyApp { 25 rootPage: any = ListPage; 26 //lock = new Auth0Lock('T1wdQrDposGW5BisaKViC0Cu9CuxtR0c...('profile', JSON.stringify(profile)); 46 // localStorage.setItem('id_token', id_token); 47

2.2K6 0

Angular2 拦截器（页面请求修改Url+headers传值+获取服务器返回的错误信息）

我们首先定义一个服务 HttpInterceptorService //http-interceptor.service.ts import { Injectable,Inject } from '@angular...import { Http,Request,RequestOptionsArgs,Response,RequestOptions,ConnectionBackend,Headers } from '@angular...未定义“内容长度”。", "status.412": "前提条件不满足。请求中给定的前提条件由服务器评估为 false。"...err.status + ' - ' + this.status['status.' + err.status]); //处理了当为 401 错误的时候我们清空localstorage...//userApiservice import { Injectable } from '@angular/core'; import { Http } from '@angular/http';

2.9K2 0

Angular企业级开发(9)-前后端分离之后添加验证码

4.IE9下的bug 以为大功告成，然后在IE9浏览器上测试一下，发现无法加载到验证码，而且控制台报错误。...折腾半天，发现IE9不支持window.URL.createObjectURL();，而且AngularJS发送请求加载二进制流文件就报错。...为了支持IE9，目前解决方法是让后台不返回二进制流文件，而是返回base64编码的字符串，这样IE9也是支持的。 5.可选一种方式和之前同事交流一番，同事提出了一个可选的方案。

1.7K10 0

Angular 结合 NG-ZORRO 快速开发

连更的这几天的文章，我们已经了解了不少 angular 的知识点了，这次我们来个小成品。 angualr 结合 ng-zorro 快速且规范的开发一个后台系统。...结合 ng-zorro angular 比较流行的 ui 框架有： Angular Material 官方指定 UI 框架 NG-ZORRO，又名 Ant Design of Angular 国内比较流行的...如果你还不了解相关的 angular 主要内容，请先前往文章了解 Angular 开发的内容。..., Validators } from '@angular/forms'; import { ActivatedRoute, ParamMap } from '@angular/router'; @Component...我们直接对 localStorage 的信息进行变更，以保证同步列表信息。删除功能我们引入模态对话框进行询问是否删除。

1.7K1 0

ionic 登录注销（ts格式）原

import {NavController,LoadingController,ToastController,ModalController,ViewController} from 'ionic-angular...=='' && this.user.userpassword=="1"){ //设置localStorage 的 username 与Logined,在ts中只能这样设置...localStorage.setItem("username", this.user.username); localStorage.setItem("Logined", "true")...position:"middle" }); toast.present(); } } 用户中心页面 import {Component} from '@angular...NavController,LoadingController,AlertController,ToastController,ModalController,ViewController } from 'ionic-angular

1.3K2 0

JSON Web Token(JWT)教程：一个基于Laravel和AngularJS的例子

实例： eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9. eyJpc3MiOiJ0b3B0YWwuY29tIiwiZXhwIjoxNDI2NDIwODAwLCJodHRwOi8vdG9wdGFsLmNvbS9qd3RfY2xhaW1zL2lzX2FkbWluIjp0cnVlLCJjb21wYW55IjoiVG9wdGFsIiwiYXdlc29tZSI6dHJ1ZX0...eyJpc3MiOiJ0b3B0YWwuY29tIiwiZXhwIjoxNDI2NDIwODAwLCJodHRwOi8vdG9wdGFsLmNvbS9qd3RfY2xhaW1zL2lzX2FkbWluIjp0cnVlLCJjb21wYW55IjoiVG9wdGFsIiwiYXdlc29tZSI6dHJ1ZX0...$httpProvider.interceptors.push(['$q', '$location', '$localStorage', function ($q, $location, $localStorage...angular.module('app') .controller('HomeController', ['$rootScope', '$scope', '$location', '$localStorage...angular.module('app') .factory('Auth', ['$http', '$localStorage', 'urls', function ($http, $localStorage

30.5K1 0

Angular 中的请求拦截

在上一篇的文章 Angular 中使用 Api 代理，我们处理了本地联调接口的问题，使用了代理。我们的接口是单独编写的处理的，在实际的开发项目中，有众多的接口，有些需要登陆凭证，有些不需要。..., HttpInterceptor, // 拦截器 HttpRequest, // 请求 } from '@angular/common/http'; import { Observable...，我们修改下拦截器内容： let secureReq: HttpRequest = req; // ... // 使用 localhost 存储用户凭证，在请求头带上 if (window.localStorage.getItem...('ut')) { let token = window.localStorage.getItem('ut') || '' secureReq = secureReq.clone({ headers...这个凭证的有效期，需要读者进入系统的时候，判断一下有效期是否有效，再考虑重置 localstorage 的值，不然会一直报错，这个也是很简单，对 localstorage 进行相关的封装方便操作即可～

2.4K2 0

React 结合 Rxjs 使用，管理数据

比如用户数据在跨组件中的使用，当然，我们可以使用 localStorage 来管理该用户的信息，这个会在下一篇的文章中介绍，敬请期待～本文，我们主打使用 Rxjs 来管理数据。...比如我们之前讲解的了解 Angular 开发的内容 - 服务 Service 和 Rxjs 中怎么处理和抓取错误。当然，Rxjs 还可以用来管理数据，在组件中传递数据～这是我们本文需要了解的内容。...项目中已经默认集成了 TypeScript 形式的 Rxjs，请参考了解 Angular 开发的内容 - 服务 Service 写法使用我们新建一个数据管理的 javascript 文件： /...data || {}; // 设置到 localStorage 里面 window.localStorage.setItem('admin-user-info', JSON.stringify...name="phone" label='联系方式' rules={[{ required: true, pattern: /^[1][0-9]

1.6K3 0

实习第三周

://enable-cors.org/server_nginx.html 2)跨域相关知识 http://www.oschina.net/question/1014827_115277 3.localstorage.setItem...("键",”值"); 前端使用localstorage实现账户的记录以及token的记录，用于后面页面的判断显示，以及退出操作。...5822426.html github里一个代码实现的例程 https://github.com/lenve/JavaEETest/tree/master/Test20-WebSocket 8.Angular1...使用ui-router可以解决 github:https://github.com/angular-ui/ui-router 官方文档(angular1 ui-router):https://ui-router.github.io.../ng1/ 路由嵌套：https://yq.aliyun.com/articles/59333 9.域名解析相关不要随便改解析，尤其是A记录 https://www.aliyun.com/zixun

8311 0

使用angular4和asp.net core 2 web api做个练习项目(四)

最后, 做一下Settings页面需要改一下setting.serviec, 将使用localstorage来存储settings: import { Injectable } from '@angular...= { disableBalanceOnAdd: true, disableBalanceOnEdit: false }; constructor() { if (localStorage.getItem..._settings = JSON.parse(localStorage.getItem('settings')); } } get settings() { return this..._settings = value; localStorage.setItem('settings', JSON.stringify(this....然后我要用asp.net core 2.0 web api 和 identity server 4 以及 angular 5 做一个项目了(angular 5正式版刚刚出来), 大约 300个页面...

1.5K10 0

Angular 项目多国语言设置

下面，我们以 Angular 项目为例，说说怎么针对 Angular 项目来设置多国语言。...这里我们采用两种方式：采用 localstorage ，对页面中用户切换语言的存储。优先级高读取浏览器设置的语言。...所以有如下判断： // 浏览器设定的语言 let lang = (localStorage.getItem('currentLanguage') || window.navigator.language...( public translate: TranslateService ) { } async ngOnInit() { let lang = (await localStorage.getItem...// 语言选择 public selectLanguage(language: string): void { window.localStorage.setItem('currentLanguage

1.9K2 0

Angular 从入坑到挖坑 - 路由守卫连连看

UrlTree> | Promise | boolean | UrlTree { // 判断是否有 token 信息 let token = localStorage.getItem...UrlTree> | Promise | boolean | UrlTree { // 判断是否有 token 信息 let token = localStorage.getItem...): boolean | UrlTree | Observable | Promise { let token = localStorage.getItem...UrlTree> | Promise | boolean | UrlTree { // 判断是否有 token 信息 let token = localStorage.getItem...): boolean | UrlTree | Observable | Promise { let token = localStorage.getItem

3.7K3 0

在前端中理解MVC服务之 Angular篇(完结)

在第三篇文章中，应用程序将使用 Angular 构建，该版本来自TypeScript 的第二个版本。因此，本文介绍应用程序从 TypeScript 到Angular的迁移。...不管怎么样，该对象从Localstorage中构建一个接受一个普通对象，该对象将会提供数据。此纯对象必须符合接口，以便任何纯对象都不能实例化，而是满足定义的接口对象。...我们Class的构造函数如下： constructor() { const users: UserDto[] = JSON.parse(localStorage.getItem('users'))..._commit(this.users); } 这个负责存储在Localstarage中的方法仍然有待定义： _commit(users: User[]) { localStorage.setItem...class UserService { public users: User[]; constructor() { const users: UserDto[] = JSON.parse(localStorage.getItem

4.1K2 0

Ionic2 Rest 认证1、创建Ionic 2 APP2、创建服务3、创建登陆和注册页面4、登出和token检查

((resolve, reject) => { let headers = new Headers(); headers.append('X-Auth-Token', localStorage.getItem...this.http.post(apiUrl+'logout', {}, {headers: headers}) .subscribe(res => { localStorage.clear...'ionic-angular'; import { HomePage } from '.....localStorage.getItem("token")) { navCtrl.setRoot(LoginPage); } } } 编辑 pages/home/home.ts...2 新概念和语法 Angular 2 & Ionic 2 概念 Angular 2 语法 Ionic 2 导航简明指南入栈出栈（Pushing and Popping）什么时候使用导航栈

3.7K3 0

【Angular教程】-组件通信｜8月更文挑战

Angular中的组件通信吧。...我们仅演示localstorage吧,其他都雷同的。...在title组件的ngOnInit()钩子中保存title到localstorage中: window.localStorage.setItem('title', this.title); 在button...组件中获取数据: const title = window.localStorage.getItem('title'); 结语: 本篇我们介绍了Angular的组件通信,为我们拆分后的组件可以进行合理的通信提供了保障...当然,下一篇我们将一起来熟悉Angular中的动态组件。

4253 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭