本地储存
随着互联网的快速发展,基于网页的应用越来越普遍,同时也变得越来越复杂,为了满足各种各样的需求,会经常性的在本地存储大量的数据,HTML5规范提出了相关解决方案
本地存储的特性
- 数据存储在用户浏览器中
- 设置、读取方便、甚至页面花心不丢失数据
- 容量较大,sessionStorage约5M、localStorage约20M
- 只能存储字符串,可以将对象JSON.stringify()编码后储存
1.window.sessionStorage
- 生命周期为关闭浏览器窗口
- 在同一窗口(页面)下数据可以共享
- 以键值对的形式存储使用
存储数据
sessionStorage.setltem(key,value)
获取数据
sessionStorage.gettltem(key)
删除数据
sessionStorage.removeltem(key)
删除所有数据
sessionStorage.clear()
// 存储数据
sessionStorage.setItem('uname',val);
//当我们点击了之后。就可以把表单里面的值回去过来
console.log(sessionStorage.getItem('uname'));
//删除某个指定键的数据
sessionStorage.removeItem('uname');
//清除所有数据
sessionStorage.clear();
2. window.localStorage
- 生命周期永久生效,除非手动删除,否则关闭页面也会存在
- 可以多窗口(页面)共享(同一浏览器共享)
- 以键值对的形式存储使用
存储数据
localStorage.setltem(key,value)
获取数据
localStorage.getltem(key)
删除数据
localstorage.removeltem(key)
删除所有数据
localStorage.clear()