cookie、sessionStorage和localStorage的区别和使用

一：cookie、sessionStorage和localStorage的区别

1.相同点是都是保存在浏览器端、且同源的。

2.cookie数据始终在同源的http请求中携带(即使不需要)，即cookie在浏览器和服务器间来回传递，而sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。cookie数据还有路径(path）的概念，可以限制cookie只属于某个路径下。

3.存储大小限制也不同，cookie数据不能超过4K，同时因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。这里需要注意的是cookie的数据大小是指单个cookie的大小，而localStorage的大小是单个域名下localStorage所占用的大小总和。

4.数据有效期不同，sessionStorage:仅在当前浏览器窗口关闭之前有效; localStorage:始终有效，窗口或浏览器关闭也—直保存，因此用作持久数据，除非用户主动删除; cookie:只在设置的cookie过期时间之前有效，即使窗口关闭或浏览器关闭。

5.作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面; localstorage在所有同源窗口中都是共享的; cookie也是在所有同源窗口中都是共享的。
 

二：cookis

注意事项：

1.前后端都可以写入和获取Cookie。

2.Cookie有数量限制,每个域名下的Cookie数量有限，根据浏览器的不同数量上线不同，如果超出限制浏览器会清除以前设置的Cookie。

3.Cookie有大小限制,最多只有4KB左右。

4.Cookie的名称或值如果包含非英文字母，则写入时需要使用encodeURIComponent()编码，读取时也使用encodeURIComponent()编码。

5.关于Domain，使用JS只能读写当前域或父域的Cookie，无法读写其他域的Cookie。

6.关于Path，使用JS只能读写当前路径和上级路径的Cookie，无法读写下级路径的Cookie。

7.当Name、Domain、Path这3个字段都相同的时候，才是同一个Cookie。

使用：

1.写入：document.cookie='username=xxxx'；

2.读取：document.cookie;

三：localStorage

注意事项：

1.单个域名下的localStorage总大小有限制，具体大小浏览器不同大小不同。

2.localStorage中的数据的生命周期为永久生效，除非用remove或者clear手动删除，否则关闭页面或者关闭浏览器后也数据会存在。甚至，关闭电脑再打开数据仍然存在。

3.不同域名下不能共用localStorage

4.以键值对的形式存储使用，并且只能是字符串类型，如果不是字符串类型，也会先自动转化为字符串类型再存进去。

使用：

1.存储：localStorage.setItem('username','alex');

2.获取：localStorage.getItem('username');

3.单独删除：localStorage.removeItem('username');

4.全部删除：localStorage.clear();

5.自动填充：一般是用在form表单，在表单提交的时候把需要填充的数据保存在localStorage，下次输入前取到对应的值进行填充即可。

四：sessionStorage

注意事项：

1.sessionStorage中的数据的生命周期是根据浏览器来的，关闭浏览器时sessionStorage中的数据就会被清空。

2.sessionStorage和localStorage基本一样，方法名和用法都一样。

3.sessionStorage在不同的窗口中不能共享，哪怕是同一个页面。