Local Storage的使用以及其意义

一 找到Local Storage

如图F12打开开发模式查看Application可以找到Local Storage,发现它存储了简书这个网址下的一些网站和用户的数据信息,其实我们自己开发时候用自己的本地ip和端口时候如果向Local Storage写了数据,也会这样归类.

二 Local Storage是干啥的?

对于浏览器来说，使用 Web Storage 存储键值对比存储 Cookie 方式更直观，而且容量更大，它包含两种：LocalStorage 和 sessionStorage

• 1.sessionStorage（临时存储） ：为每一个数据源维持一个存储区域，在浏览器打开期间存在，包括页面重新加载

• 2.localStorage（长期存储） ：与 sessionStorage 一样，但是浏览器关闭后，数据依然会一直存在

知道他们干啥的,基本就是看业务然后进行选型了,比如我需要为我的毕设做一种免登录功能,我一般就把token放在了localStorage,而用户我一些临时操作比如它上一步的选择,我会将它放在sessionStorage中,总而言之看业务选型

三 Local Storage的使用

vue.js中实现本地储存的方法

(1).储存数据
localStorage.setItem('accessToken', 'Bearer ' + response.data.result.accessToken)
(2).取出数据
localStorage.getItem('accessToken')
(3).删除储存数据
localStorage.removeItem('accessToken')
(4).更改数据
localStorage.setItem('accessToken', '更改后' + response.data.result.accessToken)

四 Local Storage的注意点

• localStorage本质上是对字符串的存取，有json格式时需要JSON.stringify()转化为字符串。
• localStorage有效期是永久的。一般的浏览器能存储的是5MB左右。
• sessionStorage api与localStorage相同。sessionStorage默认的有效期是浏览器的会话时间（也就是说标签页关闭后就消失了）。
• localStorage作用域是协议、主机名、端口。
• sessionStorage作用域是窗口、协议、主机名、端口。