localStroage和 sessionStorage以及 cookie的区别

1. localStroage 和 sessionStorage 以及 cookie 的区别。

首先总的来说，三者都是用于持久化数据存储的手段，都是存储在浏览器端，且同源（协议，端口号，都域名相同）

​ localStorage 和s essionStorage 都是Web存储，大小5M左右，完全存储在客户端，它们是因为本地存储数据而存在

​ cookies也是存储在浏览器端的，大小不超过4k，作为http规范的一部分，它是通过浏览器的请求将数据传给服务器的。

localStorage属于永久性存储，而 sessionStorage 属于当会话结束的时候，存储的值会被清空，而cookie是通过设置过期时间来存储的。

2. 什么是localStorage(本地存储)

在HTML5中，新加入了一个 localStorage 特性，这个特性主要是用来作为本地存储来使用的，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中 localStorage 会有所不同。

2.1 localStorage的特点

• localStorage拓展了cookie的 4K 限制。

• localStorage会将第一次请求的数据直接存储到本地，这个相当于一个5M大 小的针对于前端页面的数据库，但只有在高版本的浏览器中才支持的。

• 目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换。

• localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡。

2. 2 localStroage读写及删除操作。

//localStorage的写入有三种方法
window.localStorage.key=value
window.localStorage[key]=value
window.localStorage.setItem(key,value) //推荐

// 读取 localStorage
   window.localStorage.key
   window.localStorage[key]
   window.localStorage.getItem(key) //推荐

// localStorage的删除
//将localStorage中的某个键值对删除
window.localStorage.removeItem("a");

//将localStorage的所有内容清除
window.localStorage.clear();

​