【Angular】——localStorage和sessionStorage

最新推荐文章于 2021-12-01 16:29:33 发布

原创最新推荐文章于 2021-12-01 16:29:33 发布 · 6k 阅读

4 ·

CC 4.0 BY-SA版权

☆☆ Web前端同时被 2 个专栏收录

13 篇文章

订阅专栏

———— Angular

9 篇文章

订阅专栏

本文介绍了前端开发中sessionStorage与localStorage的使用方法及其区别。详细解释了这两种存储方式的生命周期、信息共享特性，并提供了具体的实现代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在前台的页面不需要往数据库中存储数据，但是需要将数据传递到下一个页面。这时候就涉及到了，数据的临时存储。前端的缓存的使用。

相同点：

1、作用是一样的，sessionStorage和localStorage一样都是用来存储客户端临时信息的对象。

2、存储内容类型：两者皆储存字符串类型的数据。

3、数据存储操作：key-value，操作用法相同。

不同点：

生命周期：

1、sessionStorage：生命周期是当前窗口或标签页，一旦窗口或标签页被关闭了，那么所有通过sessionStorage存储的数据也就被清空了，为了从安全方面考虑建议使用sessionStroage。

2、localStorage：生命周期是永久，这意味着除非用户显式操作在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。

信息共享：不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是，页面及标签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。

用法：（用法相同以localstorage为例）

1、添加文件app/core/common/local.storage.ts（文件位置根据自己喜好）

import {Provider} from '@angular/core'; 
export class LocalStorage {

    public localStorage:any;

    constructor() {
        if (!localStorage) {
            throw new Error('Current browser does not support Local Storage');
        }
        this.localStorage = localStorage;
    }

    public set(key:string, value:string):void {
        this.localStorage[key] = value;
    }

    public get(key:string):string {
        return this.localStorage[key] || false;
    }

    public setObject(key:string, value:any):void {
        this.localStorage[key] = JSON.stringify(value);
    }

    public getObject(key:string):any {
        return JSON.parse(this.localStorage[key] || '{}');
    }

    public remove(key:string):any {
        this.localStorage.removeItem(key);
    }
}

2、在文件app.module.ts中引用

import { LocalStorage } from './core/common/local.storage';
...
@NgModule({
   ...
   providers: [LocalStorage,...],
...
})

3、自己的Component中

   //存储数据
   localStorage.setItem("key","value");

   //取出数据
   localStorage.getItem("key");

   //清楚数据
   localStorage.removeItem("key");

   //清空数据
   localStorage.clear();

4、补充使用存储“list”因为localstorage只能存储数值类型的数据，在前台中如果想存入多条数据且key值不变，可以采用数组的形式存储。

  var roy={"name":"被子","count":"3","payTypeId":"123","isExpense":"0","total":"500"};
  var RoyW=JSON.stringify(roy);//json转成字符串类型
  localStorage.setItem("expenses",RoyW);