cookies,sessionStorage和localStorage的区别

cookies,sessionStorage和localStorage的区别

1.Web Storage

软件编程希望通过一些手段来持久化的存储一些有用的数据。对于网络化编程，一般将这项任务交给了服务器端的数据库或者浏览器端的cookie。

随着HTML5的出现，web开发又有了两种选择：Web Storage和Web SQL Database.

Web Storage有两种形式：

LocalStorage（本地存储）和sessionStorage（会话存储）。

这两种方式都允许开发者使用js设置的键值对进行操作，在在重新加载不同的页面的时候读出它们。这一点与cookie类似。

（1）与cookie不同的是：Web Storage数据完全存储在客户端，不需要通过浏览器的请求将数据传给服务器，因此相比cookie来说能够存储更多的数据，大概5M左右。单个cookie在客户端的限制是3K，就是说一个站点在客户端存放的COOKIE不能3K。

（2）LocalStorage和sessionStorage功能上是一样的，但是存储持久时间不一样。

LocalStorage：浏览器关闭了数据仍然可以保存下来，并可用于所有同源（相同的域名、协议和端口）窗口（或标签页）永久存储，永不失效，除非手动删除

sessionStorage：数据存储在窗口对象中，窗口关闭后对应的窗口对象消失，存储的数据也会丢失。就是浏览器窗口关闭就失效了。

注意：sessionStorage 都可以用localStorage 来代替，但需要记住的是，在窗口或者标签页关闭时，使用sessionStorage 存储的数据会丢失。

（3）使用 local storage和session storage主要通过在js中操作这两个对象来实现，分别为window.localStorage和window.sessionStorage. 这两个对象均是Storage类的两个实例，自然也具有Storage类的属性和方法。

但是cookie需要前端开发者自己封装setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。

Storage类的相关成员如下：成员名

方法参数

描述

length

属性

获取存储数据的条数key(n)

n:索引值

根据索引值，返回键名

getItem(key)

key:键名

根据键名，获取数据值

setItem(key,value)

key:键名 value:键值

根据键名和键值设置数据项，如果键名已经存在，则覆盖值

removeItem(key)

key:键名

根据键名删除一个数据项

clear()

无

清空当前的Storage对象