window.sessionStorage、window.localStorage与cookie总结
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了window.sessionStorage、window.localStorage与cookie总结相关的知识,希望对你有一定的参考价值。
参考技术A前言:最近项目中用到了本地存储和cookie,虽然平时也经常提到,但是在用的时候还是有些模糊,这里做一下总结,以便加深记忆。
Web Storage是为了在本地“存储”数据而生,均不会被发送到服务器端。包括了两种存储方式:sessionStorage和localStorage,这两个对象在支持的浏览器中都是以 window 对象属性的形式存在的。
相同点:
1、仅在客户端中保存,不参与和服务器的通信
2、都有同源策略限制,不同浏览器无法共享localStorage或sessionStorage中的信息
3、存储大小均为5M左右
不同点:
1、生命周期
localStoage:是一种永久性存储,除非手动清除。
sessionStorage:会话存储,存储在 sessionStorage 里面的数据在页面会话结束时会被清除,也就是一旦窗口或者标签页被关闭,那么所有通过 sessionStorage 存储的数据也会被删。页面会话在浏览器打开期间一直保持,并且重新加载或恢复页面仍会保持原来的页面会话。
2.作用域
localStorage: 在同一个浏览器内,同源文档(页面属于相同域名和端口)之间,即使是不同页面可以共享 localStorage 数据,可以互相读取、覆盖。
sessionStorage: 与 localStorage 一样需要同一浏览器同源文档这一条件。不仅如此,sessionStorage 的作用域还被限定在了窗口中,也就是说,只有同一浏览器、同一窗口的同源文档才能共享数据。
语法:
sessionStorage或localStorage两种存储方式几乎都有相同的方法和属性。
1.localStorage.length 和 sessionStorage.length : 返回本地存储列表长度;需要说明的是可以通过localStorage对象获取对应的存储数据,比如已经存储了一个键为name的数据,使用localStorage.name获取存储数据;下面的方法都是基于localStorage 对象 或 sessionStorage 对象;
2.getItem( keyName )方法:通过键获取存储的数据;
3.setItem( keyName,value )方法:存储数据,keyName为存储数据的键,value实际要存储的数据(可以把keyName理解成 给要存储的数据起的名字,便于管理);
4.removeItem( keyName )方法: 将指定键名的数据删除;
5.clear() 方法:清空所有的存储数据;
6.key() 方法: 获取键值,需要注意的是并不能返回指定布尔值需要作进一步处理
基本概念
1、cookie 确实非常小,它的大小限制为4KB左右。
2、要表示唯一的一个cookie值需要:name、domain、path
3、一般由服务器生成,可设置失效时间。如果在浏览器端生成Cookie,默认是关闭浏览器后失效。
4、每次都会携带在HTTP头中,如果使用cookie保存过多数据会带来性能问题。
cookie的使用
document.cookie,通过该方法可以读取、修改、删除cookie。
以上是关于window.sessionStorage、window.localStorage与cookie总结的主要内容,如果未能解决你的问题,请参考以下文章
如何在 chrome 控制台中查看 $window.sessionStorage 的属性
window.sessionStorage、window.localStorage与cookie总结