浅析HTMl5中的Web Storage：sessionStorage和localStorage

比眉伴天荒 2022-07-14 14:52 218阅读 0赞

### 前言 ###

`html5`中的`Web Storage`包括了两种存储方式：`sessionStorage`和`localStorage`，他们均只能存储字符串类型的对象，并且操作方式相同。

其中，`sessionStorage`数据的存储仅特定于某个会话中这些数据，只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁；相反，`localStorage`生命周期是永久，除非主动清除localStorage信息，否则将会一直存在。

在实际项目使用过程中，我们主要会使用`localStroage`.

### 操作方法 ###

*  localStorage存储方法

localStorage.key = 'value'
    localStorage[key] = 'value'
    localStorage.setItem('key','value');//三种操作方式皆可

*  localStorage获取值方法

let value = localStorage.key
    let value = localStorage[key]
    let value = localStorage.getItem('key');//三种操作方式皆可

*  localStorage清值方法

localStorage.removeItem('key');//移除值
    localStorage.key＝'';//设置值为空

### 拓展 ###

由于`sessionStorage`和`localStorage`，他们均只能存储字符串类型的对象，如果需要存储对象，则需要使用`JSON.stringify()`方法先将其转换为字符串类型，然后再进行存储；如果需要将对象取出并使用，则需要使用`JSON.parse()`方法将取出的值从新转化为对象。

例如我们存储一个JSON：

let Test = {message:hello}
    localStorage.setItem('test',JSON.stringify(Test))//存储时先将其转化为字符串然后进行存储
    Test = JSON.parse(localStorage.getItem('test'))//取值时需要先将其取出然后转化为对象

> 查看更多博客请点击进入我的[个人博客][Link 1]

[Link 1]: http://h5base.cn