<style>
body{font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft JhengHei', Roboto, 'Helvetica Neue', Arial, sans-serif;}
.red-color{color:#f00}
.blue-color{color:#f00}
</style>
###### tags: `API`
# localStorage
> [time=Sat, Dec 21, 2019 11:33 PM]
> [name=aikwdc00]
>
# 介紹
1. localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。
1. localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。
1. localStorage 属性是只读的。

# 语法

//保存数据语法：
localStorage.setItem("key", "value");
//读取数据语法：
const lastname = localStorage.getItem("key");
//删除数据语法：
localStorage.removeItem("key");
// 移除所有
localStorage.clear();
//----------------------------------------------------
// 存储
localStorage.setItem("lastname", "Smith");
// 检索
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

# 優勢
1. localStorage 拓展了 cookie 的 4K 限制。
1. localStorage 会可以将第一次请求的数据直接存储到本地，这个相当于一个 5M 大小的针对于前端页面的数据库，相比于 cookie 可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的。
# localStorage 的局限
1、浏览器的大小不统一，并且在 IE8 以上的 IE 版本才支持 localStorage 这个属性。
2、目前所有的浏览器中都会把localStorage的值类型**限定为string类型**，这个在对我们日常比较常见的JSON对象类型需要一些转换。

storage.setItem("data",JSON.stringify(data))//將資料轉為json字串

JSON.parse(storage.getItem("data"))//將資料將為jso物件

3、localStorage在浏览器的隐私模式下面是不可读取的。
4、localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡。
5、localStorage不能被爬虫抓取到。
localStorage 与 sessionStorage 的唯一一点区别就是 localStorage 属于永久性存储，而 sessionStorage 属于当会话结束的时候，sessionStorage 中的键值对会被清空。

> [MDN](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage)
> [W3school](https://www.w3schools.com/html/html5_webstorage.asp)
> [菜鳥教程](https://www.runoob.com/jsref/prop-win-localstorage.html)