CookiesessionStorage和localStorage的区别

Posted 2022-01-27 开到荼蘼223's

Cookie

在html5之前Cookie用于客户端和服务器端的通信，具有本地存储功能，Cookie的存储非常小，只有4k大小，主要用于保存登录信息，Cookie的内容主要包括：名字、值、过期时间、路径和域。

localStorage

localStorage是Html5的一个新特性，主要是用来作为本地存储来使用的，解决了cookie存储控件不足的缺点，localStorage中一般浏览器的支持是5M大小，在不同浏览器中会有所不同。local是“本地”的意思，即本地存储，localStorage会将数据保存在本地，关闭页面后数据依然会保存。

sessionStorage

sessionStorage与localStorage相似，都是用来存储数据的，但保存数据的生命周期与localStorage不同，正如其名，session是“会话”的意思，即会话存储，sessionStorage只是将一部分数据在当前对话中保存下来，刷新页面数据依然存在，但当关闭页面后数据会消失。

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

• sessionStorage（临时存储）：为每一个数据源维持一个存储区域，在浏览器打开期间存在，包括页面重新加载
• localStorage（长期存储）：与 sessionStorage 一样，但是浏览器关闭后，数据依然会一直存在

区别

1.生命周期

Cookie：可以自己设置失效时间，如果没有设置，当页面关闭后失效
localStorage：本地存储只能通过手动清除，否则会一直保存
sessionStorage：会话存储当浏览器关闭后失效

2.存储大小

Cookie：Cookie的存储大小只有4k
sessionStorage和localStorage：一般存储大小都有5M

3.与服务器通信

Cookie：每次都会携带在HTTP头中，如果使用Cookie保存过多数据会影响性能，Cookie会在浏览器和服务器来回传递
sessionStorage和localStorage：不会自动把数据发送给服务器，仅在客户端中保存，不参与服务器通信。

4.易用性

Cookie：api需要自行进行封装，比较复杂
sessionStorage和localStorage：api简单易用

localStorage和sessionStorage用法
sessionStorage 和 localStorage 的用法基本一致，localStorage和sessionStorage都具有相同的操作方法，例如setItem()、getItem()和removeItem()等，引用类型的值要转换成JSON
valueOf() /获取全部数据
let dataAll = sessionStorage.valueOf()
let dataAll2 = localStorage.valueOf()

setItem() 将value存储到key字段
sessionStorage.setItem("key", "value")
localStorage.setItem("key2, "value2")

getItem() 获取指定key本地存储的值
var value = sessionStorage.getItem("key");
var value2 = localStorage.getItem("site");

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

clear() 清除所有的key和value
sessionStorage.clear();
localStorage.clear();

		var name = 'sessionData';
        var num = 9988;
        sessionStorage.setItem(name, num);//存储数据
        sessionStorage.setItem('value2', 8899);
        let dataAll = sessionStorage.valueOf();//获取全部数据
        console.log(dataAll, '获取全部数据');
        var dataSession = sessionStorage.getItem(name);//获取指定键名数据
        var dataSession2 = sessionStorage.sessionData;//sessionStorage是js对象，也可以使用key的方式来获取值
        console.log(dataSession, dataSession2, '获取指定键名数据');
        sessionStorage.removeItem(name); //删除指定键名数据
        console.log(dataAll, '获取全部数据');
        sessionStorage.clear();//清空缓存数据：localStorage.clear();
        console.log(dataAll, '获取全部数据');// 没有数据了