commit

src/app/pages/home/home.component.html

@@ -4,9 +4,8 @@
  * @Author: Ruin 🍭
  * @Date: 2022-03-03 17:06:15
  * @LastEditors: 刘引
- * @LastEditTime: 2022-03-04 15:53:16
--->
-
+ * @LastEditTime: 2022-03-07 08:58:41
+-->‘
 <!-- <app-news></app-news> -->
 <!-- <app-head></app-head> -->
 <!-- <app-news></app-news> -->

src/app/pages/home/home.component.ts

@@ -1,5 +1,16 @@
+/*
+ * @Description: {{ByRuin}}
+ * @Version: 2.0
+ * @Author: Ruin 🍭
+ * @Date: 2022-03-03 17:06:15
+ * @LastEditors: 刘引
+ * @LastEditTime: 2022-03-07 10:20:44
+ */
 import { Component, OnInit } from "@angular/core";
-
+// 引入服务
+import { StorageService } from "src/app/services/storage.service";
+// 实例化类
+// let storage = new StorageService();
 @Component({
   selector: "app-home",
   templateUrl: "./home.component.html",
@@ -7,7 +18,22 @@ import { Component, OnInit } from "@angular/core";
 })
 export class HomeComponent implements OnInit {
   public textContent: any;
-  constructor() {}
+  // 依赖注入 语法糖写法 相当于在构造器中 实例化对象
+  constructor(public storage: StorageService) {
+    // let res = storage.getTest();
+    let key: string = "cat";
+    let value: string = "hello";
+    // 设置缓存
+    storage.setStorage(key, value);
+    // 获取缓存
+    let result = storage.getStorage(key);
+    // 删除缓存
+    storage.removeStorage(key);
+    console.log(result);
+    // 清除所有缓存
+    storage.clearStorage();
+    // console.log(res);
+  }
 
   ngOnInit(): void {}
   changeKeyword() {

src/app/pages/home/home.module.ts

@@ -4,7 +4,7 @@
  * @Author: Ruin 🍭
  * @Date: 2022-03-03 17:06:01
  * @LastEditors: 刘引
- * @LastEditTime: 2022-03-04 15:42:19
+ * @LastEditTime: 2022-03-07 10:19:20
  */
 import { NgModule } from "@angular/core";
 import { CommonModule } from "@angular/common";

src/app/pages/pages.module.ts

@@ -4,15 +4,18 @@
  * @Author: Ruin 🍭
  * @Date: 2022-03-03 17:03:51
  * @LastEditors: 刘引
- * @LastEditTime: 2022-03-04 15:46:33
+ * @LastEditTime: 2022-03-07 09:58:23
  */
 import { NgModule } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { HomeModule } from "./home/home.module";
 import { UserModule } from "./user/user.module";
+
+// 引入并且配置服务
 @NgModule({
   declarations: [],
   imports: [CommonModule, HomeModule, UserModule],
+  providers: [],
   exports: [CommonModule, HomeModule, UserModule],
 })
 export class PagesModule {}

src/app/services/storage.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { StorageService } from './storage.service';
+
+describe('StorageService', () => {
+  let service: StorageService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(StorageService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/storage.service.ts

@@ -0,0 +1,36 @@
+/*
+ * @Description: {{ByRuin}}
+ * @Version: 2.0
+ * @Author: Ruin 🍭
+ * @Date: 2022-03-07 09:39:15
+ * @LastEditors: 刘引
+ * @LastEditTime: 2022-03-07 10:21:29
+ */
+import { Injectable } from "@angular/core";
+
+@Injectable({
+  providedIn: "root",
+})
+export class StorageService {
+  constructor() {}
+  getTest() {
+    return "this is service";
+  }
+
+  // 添加缓存
+  setStorage(key: any, value: any) {
+    localStorage.setItem(key, JSON.stringify(value));
+  }
+  // 读取缓存
+  getStorage(key: any): any {
+    return localStorage.getItem(key);
+  }
+  // 删除指定缓存
+  removeStorage(key: any): any {
+    localStorage.removeItem(key);
+  }
+  // 删除所有缓存
+  clearStorage() {
+    localStorage.clear();
+  }
+}