08-vue-cli 本地存储

浅浅的花香味﹌ 2024-04-01 09:32 20阅读 0赞

## 一、介绍 ##

在以前javaEE的jsp开发中,如果两个页面传值，我们用session或者request存储，jsp页面用el表达式去取. 而现在前后端分离开发后，没用jsp，也就无法用el表达式再去取值了。这个时候H5的本地存储就可以满足我们这个需求了

html5中的本地存储(Web Storage)包括了两种存储方式：

> 1.  sessionStorage
> 2.  localStorage

*  sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁
 *  localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的

localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem、removeItem、clear。下面以localStorage举例

## 二、localStorage和cookie的区别 ##

### 1.cookie的特点： ###

> 只能存储文本
> 
> 单条存储有大小限制4KB左右
> 
> 数量限制 ， 一般浏览器，限制大概在50条左右
> 
> 时效限制

### 2.localStorage 的特点 ###

> 只能存储文本
> 
> 存储大小5M
> 
> 数量无限制
> 
> 永久存储，除非手动清除

localStorage.setItem("userName",this.userInfo.userName);  
    
    this.userName = localStorage.getItem("userName");

安全性不高的数据使用本地来存储，安全性高的数据使用服务端存储。

### 3.localStorage 和sessionStorage区别： ###

1.sessionStorage的范围不大，当访问后关掉页面后，当前的用户名会清掉，就获取不到用户名了

2.**localStorage 来存取的话，不会清除掉，永远存在**

### 4.localStorage 的方法 ###

#### 1 setItem 存储 value ####

> .setItem( key, value) 将value存储到key字段。
> 
> localStorage.setItem("job", "basketballplayer")

#### 2 getItem获取value ####

> .getItem(key) 获取指定key本地存储的值。
> 
> localStorage.getItem("job")。

#### 3 removeItem删除key ####

> .removeItem(key)删除指定key本地存储的值。
> 
> localStorage.removeItem("job");

#### 4 clear清除所有的key/value ####

> .clear() 清除所有的key/value
> 
> localStorage.clear();

#### 5 setItem 存储 json对象 ####

> localStorage 和 sessionStorage也可存储Json对象，存储时，通过JSON.stringify()将对象转换为文本格式；读取时，通过JSON.parse()将文本转换回对象。

例如：
    
    要存储的JS对象
    
    user: {userName: "admin",userPwd: 123}
    
    //本地存储存储json对象
    
    sessionStorage.setItem("user",JSON.stringify(user));
    
    //取出本地存储对象
    
    var user = sessionStorage.getItem("user");
    
    //把字符串转换成json对象
    
    var jsonUser = JSON.parse(user)
    
    //取值
    
    Var userName = jsonUser.userName;

### localStorage做记住我操作 ###

思路：

判断复选框是否被选中，选中后，获取值，存在localStorage 中，然后。。。。