目录
浏览器的本地存储
随着互联网的快速发展,基于网页的应用越来越普遍,同时也变的越来越复杂,为了满足各种各样的需求，浏览器会经常性的在本地存储大量的数据，因此HTML5规范提出了相关解决方案。
本地存储特性
数据直接存储在用户的浏览器中
设置、读取比较方便,甚至页面刷新以后不丢失数据
容量较大，sessionStorage约5M、localStorage约20M
只能存储字符串,可以将对象JSON.stringify() 编码后进行存储
window.sessionStorage
介绍
sessionStorage的生命周期为关闭浏览器窗口
在同一个窗口(页面)下数据可以共享
数据以键值对的形式存储使用
语法:
- 存储数据:
- sessionStorage.setItem(key, value)
- 获取数据:
- sessionStorage.getItem(key)
- 删除数据:
- sessionStorage.removeItem(key)
- 清空数据：(所有的数据都清除掉)
- sessionStorage.clear()
window.localStorage
介绍
- localStorage生命周期永久生效，除非自己手动删除 否则关闭页面也会存在
- 可以多窗口（页面）共享（同一浏览器可以共享），即使浏览器关闭也在
- 数据以键值对的形式存储使用
语法:
- 存储数据:
- localStorage.setItem(key, value)
- 获取数据：
- localStorage.getItem(key)
- 删除数据：
- localStorage.removeItem(key)
- 清空数据：(所有的数据都清除掉)
- localStorage.clear()
1.window.sessionStorage
介绍
- (1).生命周期为关闭浏览器窗口（关闭浏览器之后，所存储的数据也就随之清空）
- (2).以键值对形式存取使用
- (3).在同一窗口（页面）下数据可以共享
简介
//存储数据
sessionStorage.setItem(key,val)
//获取数据
sessionStorage.getItem(key)
//删除数据
sessionStorage.removeItem(key)
//清除所有数据
sessionStorage.clear()
本地代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="text">
<button class="set">存储数据</button>
<button class="get">获取数据</button>
<button class="del">删除数据</button>
<button class="clear">清空全部数据</button>
<script>
var ipt = document.querySelector('input');
var set = document.querySelector('.set');
var get = document.querySelector('.get');
var del = document.querySelector('.del');
var clear = document.querySelector('.clear');
set.addEventListener('click', function(){
var value = ipt.value;
sessionStorage.setItem('uname', value);
sessionStorage.setItem('uage', value);
sessionStorage.setItem('usex', value);
})
get.addEventListener('click',function(){
var getValue = sessionStorage.getItem('uname');
console.log(getValue);
})
del.addEventListener('click',function() {
sessionStorage.removeItem('uname');
sessionStorage.removeItem('uage');
})
clear.addEventListener('click',function(){
sessionStorage.clear();
})
</script>
</body>
</html>
动图示例
2.window.localStorage
介绍
- (1).生命周期永久生效，除非手动删除，否者关闭页面也会存在
- (2).以键值对形式存取使用
- (3).在多窗口（页面）（同一浏览器）下数据可以共享
简介
//存储数据
localStorage.setItem(key,val)
//获取数据
localStorage.getItem(key)
//删除数据
localStorage.removeItem(key)
//清除所有数据
localStorage.clear()
区别：
（1）声明周期不同
（2）sessionStorage存储的数据只能在同一窗口下共享，localStorage存储的数据能够在多窗口下共享
2093
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
