首先总的来说,三者都是用于持久化数据存储的手段,都是存储在浏览器端,且同源(协议,端口号,都域名相同)
- localStorage和sessionStorage都是Web存储,大小5M左右,完全存储在客户端,它们是因为本地存储数据而存在
- cookies也是存储在浏览器端的,大小不超过4k,作为http规范的一部分,它是通过浏览器的请求将数据传给服务器的。
区别
- 有效期
1.localStorage ———-永久存储,永不失效,除非手动删除
2.sessionStorage——–数据存储在窗口对象中,窗口关闭后,数据丢失
3. cookies—————–只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭
- 作用域
1.sessionStorage不在不同的浏览器窗口共享,即使是同一个页面
2.localStorage和cookies是在所有同源窗口中共享的
- 操作方式
- sessionStorage和localeStorage主要通过js操作window.localStorage和window.sessionStorage这两个对象实例的属性和方法
- cookies需要前端开发者自己封装setCookies和getCookies
- 其他区别
1.cookies数据始终在同源的http请求中携带(即使不需要),适合保存很小的数据
2.sessionStorage和localStorage不会自动的将数据发送给服务器,仅在本地存储
- Storage类的相关成员
1.length 属性 获取存储数据的条数
2.key(n) n:索引值 根据索引值,返回键名
3.getItem(key) key:键名 根据键名,获取数据值
4.setItem(key,value) key:键名 value:键值 根据键名和键值设置数据项,如果键名已经存在,则覆盖值
5.removeItem(key) key:键名 根据键名删除一个数据项