本地存储 localStorage
1、localStorage、sessionStorage与cookie的区别
- cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下。
- 存储大小限制也不同,cookie数据不能超过4k,同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。
- 数据有效期不同,sessionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持;localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。
- 作用域不同,sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;localStorage 在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的。
- Web Storage 支持事件通知机制,可以将数据更新的通知发送给监听者。
- Web Storage 的 api 接口使用更方便。
2、webStorage分类
-
localStorage: 本地存储,用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的;
-
sessionStorage:会话存储,用于本地存储一个会话 (session)中的数据,这些数据当在关闭浏览器后数据也随之销毁。
-
localStorage 和 sessionStorage都是window对象的属性
3、localStorageAPI
方法 | 功能 |
---|---|
setItem() | 存储数据 |
getItem() | 获取本地存储的值 |
removeItem() | 删除指定key本地存储的值 |
clear() | 清空网站在本地保存的所有数据的 |
4、存储数据的三种方法
-
setItem()
语法: localStorage.setItem(“keyname”,value) 功能:在本地存储中以key键/值的方式存储数据 说明: keyname //键名 value //存储的值
-
localStorage.keyname = value;
-
localStorage[‘keyname’] = value;
-
localStorage持久化存储,sessionStorage临时存储
5、读取数据的三种方法
-
getItem()
语法: localStorage.getItem(“keyname”) 功能:获取本地存储中的数据 说明: keyname 键名
-
localStorage.keyname
-
localStorage[‘keyname’]
6、删除数据的两种方法
- removeItem()
语法:localStorage.removeItem(“keyname”)
功能:删除指定的本地存储中的数据
说明:
keyname 键名 - clear()
语法:localStorage.clear( )
功能:清空本地存储中的所有的数据
通过JSON存储对象的方式
- JSON.stringify(对象)
把对象转换成JSON字符串 - JSON.parse(json串)
yname 键名