javascript 本地存储与会话存储
作者：互联网
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>localStorage</title>
</head>
<body>
<h5>用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。</h5>
<h2>localStorage</h2>
<button onclick="saveData()">点我添加一个数据</button>
<button onclick="readData()">点我读取一个数据</button>
<button onclick="deleteData()">点我删除一个数据</button>
<button onclick="deleteAllData()">点我清空数据</button>
</body>
<script>
const data = { name: '小红', sex: 18 }
function saveData() {
localStorage.setItem('msg', '嘿!')
localStorage.setItem('file', 'text.txt')
localStorage.setItem('ponple', data)// [object Object]
//JSON.stringify()值转换为 JSON 字符串。
localStorage.setItem('person', JSON.stringify(data))// {"name":"小红","sex":18}
}
function readData() {
console.log(localStorage.getItem('msg'))
console.log(localStorage.getItem('file'))
const res = localStorage.getItem('person')
console.log(JSON.parse(res))//解析为js对象
console.log(localStorage.getItem('person'))//获取到的普通字符串
}
function deleteData() {
localStorage.removeItem('msg')
localStorage.removeItem('file')
localStorage.removeItem('ponple')
localStorage.removeItem('person')
}
function deleteAllData() {
localStorage.clear()
}
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>sessionStorage</title>
</head>
<body>
<h5>临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。</h5>
<h2>sessionStorage</h2>
<button onclick="saveData()">点我添加一个数据</button>
<button onclick="readData()">点我读取一个数据</button>
<button onclick="deleteData()">点我删除一个数据</button>
<button onclick="deleteAllData()">点我清空数据</button>
</body>
<script>
const data = { name: '小红', sex: 18 }
function saveData() {
sessionStorage.setItem('msg', '嘿!')
sessionStorage.setItem('file', 'text.txt')
sessionStorage.setItem('ponple', data)// [object Object]
//JSON.stringify()值转换为 JSON 字符串。
sessionStorage.setItem('person', JSON.stringify(data))// {"name":"小红","sex":18}
}
function readData() {
console.log(sessionStorage.getItem('msg'))
console.log(sessionStorage.getItem('file'))
const res = sessionStorage.getItem('person')
console.log(JSON.parse(res))//解析为js对象
console.log(sessionStorage.getItem('person'))//获取到的普通字符串
}
function deleteData() {
sessionStorage.removeItem('msg')
sessionStorage.removeItem('file')
sessionStorage.removeItem('ponple')
sessionStorage.removeItem('person')
}
function deleteAllData() {
sessionStorage.clear()
}
</script>
</html>
标签：function,存储,console,sessionStorage,javascript,JSON,setItem,与会,localStorage 来源： https://www.cnblogs.com/lin-n/p/16229810.html