前端本地存储的三种方式
前端的本地存储，就是将一些数据存储在浏览器本地。这些数据可能是从服务器端获取到的数据，也可能是在多个页面中需要频繁使用到的数据，如：用户的基本信息。
一、cookie
🏑在 h5 之前，本地存储的主要方式就是 cookie ，cookie可以实现少量数据的存储。为什么是少量？因为 cookie 有 4k 的限制，没办法存储数据量较大的数据。
😗cookie的使用场景：
- 用于浏览器和server的通讯
- 可设置失效时间，默认是浏览器关闭后失效
- 存放数据大小为4K左右
- 每次都会携带在HTTP头中，如果使用Cookie保存过多数据会带来性能的问题
- .需要程序员自己封装，原生的Cookie接口不友好
🥳cookie的缺点：
除了上面说的只能存储 4k 的数据以外，浏览器在发起请求时，也会将其带在请求头上，污染主domain的同时又增加了用户使用的流量，所以h5 引入了两个新的方式来进行本地存储。
😙cookie的使用：
(设置) docment.cookie= "a=100; b=200" //一次只能添加一个, 多余的会被截取
(读取) document.cookie //"a=100"
(修改) docment.cookie= "a=101“
(读取) document.cookie //"a=101"二、sessionStorage
🏑sessionStorage 是一个全局对象，数据以键值对的方式进行存储，所以它的使用方式与普通对象非常相似，可以直接通过中括号 sessionStorage[‘key’] 的方式添加和获取数据，也可以通过点语法 sessionStorage.key 的方式进行操作，sessionStorage 也有自己的 api 用于操作数据
(设置)
sessionStorage.setItem("key", "value")
sessionStorage.key="value"
sessionStorage["name"]="bonly"
(读取)
sessionStorage.getItem("key")
sessionStorage["name"]
sessionStorage.name
(删除)
sessionStorage.removeItem("name")
(删除所有数据)
sessionStorage.clear()😗sessionStorage 的使用场景：
- 仅在当前会话下有效，关闭tab页面或浏览器后被清除
- 存放数据大小一般为5MB
- 仅在客户端（即浏览器）中保存，不参与和服务器的通信
🥳sessionStorage 的缺点：
sessionStorage 中存储的数据不会被自动随着请求被发送到服务端，可存储的数据大小相比 cookie 来说大了很多，但是每个浏览器都不同，所以没有一个统一的值。其中所存储的数据的生命周期与 session 类似，即只存在于一个会话周期内，当浏览器关闭或标签页关闭时，数据即会被删除（前进和后退并不会影响到数据，因为还在当前的会话中），这就导致了即便是同一个网站，但在不同的标签页和窗口内，也无法共享其中存储的数据。
三、localStorage
😗localStorage 的使用场景：
- 除非被清除，否则永久保存
- 存放数据大小一般为5MB
- 仅在客户端（即浏览器）中保存，不参与和服务器的通信
- 浏览器可以设置是否可以访问数据，如果设置不允许会访问失败
- 兼容IE8以上浏览器 6.只能存储字符串类型，需要转成字符串存储
😗localStorage的使用：
(设置)
localStorage.setItem("key","value")
localStorage["name"]="bonly";
localStorage.key="value";
(读取)
localStorage.getItem("key");
localStorage["name"]; localStorage.key;
(修改) // 就是相当于给对应的key重新赋值，就会把原来的值覆盖掉
localStorage.setItem("key","value")
(移除)
localStorage.removeitem('name')
delete localStorage["name"]
delete localStorage.name
(获取所有的key)
for(var key in localStorage){ console.log(key); }
(获取所有的值)
localStorage.valueOf()
(清除所有的值)
localStorage.clear()
(判断是否具有某个key，hasOwnProperty方法) // 如果存在的话返回true，不存在返回false
localStorage.hasOwnProperty("name") 使用技巧：
- 先判断浏览器是否支持localStorage，通过if(!window.localStorage) return;
- 单词太长，不方便书写，可以利用 var storage=window.localStorage;
- 字符串和原始类型需要通过 JSON.stringfy 转字符串，通过 JSON.parse 转成对象
- 通过封装方法实现来回转化
四、三种存储方式共同的缺点
三种存储方式都只能存储字符串类型或者可转为字符串的简单数据，并不适合用来存储复杂的关系型数据，但是 h5 为我们提供了一个新的 api —— Web SQL Database
