【Angular】——localStorage和sessionStorage

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

相同点：

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

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

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

不同点：

生命周期：

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

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

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

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

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

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

2、自己的Component中使用

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

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

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

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

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!