本地存储特性
- 数据存储在用户浏览器中
- 设置 , 读取方便 , 甚至刷新不丢失数据
- 容量大 sessionStorage约5M , localStorage约20M
- 只能存储字符串 , 可以将对象
JSON.stringify()
后再存储
localStorage
特性 :
- 生命周期永久有效 , 除非手动删除
- 可以多窗口(页面)共享(同一浏览器共享)
- 以键值对的形式储存使用
localStorage.setItem(key, value)
存储数据localStorage.getItem(key)
获取数据localStorage.removeItem(key)
删除数据localStorage.clear()
删除所有数据
//添加到本地存储
set.addEventListener('click', function() {
var val = input.value;
localStorage.setItem('userName',val);
})
//获取本地存储
get.addEventListener('click',function() {
console.log(localStorage('userName'));
})
//删除本地存储
remove.addEventListener('click',function() {
localStorage.removeItem('userName');
})
//清空本地存储
del.addEventListener('click', function() {
localStorage.clear();
})
sessionStorage
(和上面localStorage用法一样)
特性 :
- 生命周期为关闭浏览器窗口
- 在**同一个窗口(页面)**下数据共享
- 以键值对的形式存储使用
sessionStorage.setItem(key, value)
存储数据sessionStorage.getItem(key)
获取数据sessionStorage.removeItem(key)
删除数据sessionStorage.clear()
删除所有数据