本地存储
本地存储特性
- 随互联网快速发展,基于网页的应用越来越普遍、复杂。为满足各种需求,经常会在本地存储大量数据,HTML5 规范提出了相关解决方案
- 特性
1.数据存储在用户浏览器中
2.设置、读取方便,甚至页面刷新不丢失数据
3.容量较大,sessionStorage 约 5M、localStorage 约 20M
4.只能存储字符串,可以将对象 JSON.stringify() 编码后存储
window.sessionStorage
- 特性
1.生命周期:关闭浏览器窗口
2.同一个窗口(页面)下数据可共享
3.以键值对的形式存储使用 sessionStorage.setItem(key, value)
【存储数据】sessionStorage.getItem(key)
【获取数据】sessionStorage.removeItem(key)
【删除数据】sessionStorage.clear()
【删除所有数据】- 示例
<body> <input type="text"> <button class="set">存储数据</button> <button class="get">获取数据</button> <button class="remove">删除数据</button> <button class="del">清空所有数据</button> <script> console.log(localStorage.getItem('username')); var ipt = document.querySelector('input'); var set = document.querySelector('.set'); var get = document.querySelector('.get'); var remove = document.querySelector('.remove'); var del = document.querySelector('.del'); set.addEventListener('click', function() { var val = ipt.value; sessionStorage.setItem('uname', val); sessionStorage.setItem('pwd', val); }); get.addEventListener('click', function() { console.log(sessionStorage.getItem('uname')); }); remove.addEventListener('click', function() { sessionStorage.removeItem('uname'); }); del.addEventListener('click', function() { sessionStorage.clear(); }); </script> </body>
window.localStorage
- 特性
1.生命周期:永久生效。除非手动删除,否则关闭页面也会存在
2.可以多窗口(页面)共享【同一浏览器可共享】
3.以键值对的形式存储使用 localStorage.setItem(key, value)
【存储数据】localStorage.getItem(key)
【获取数据】localStorage.removeItem(key)
【删除数据】localStorage.clear()
【删除所有数据】- 示例
<body> <input type="text"> <button class="set">存储数据</button> <button class="get">获取数据</button> <button class="remove">删除数据</button> <button class="del">清空所有数据</button> <script> var ipt = document.querySelector('input'); var set = document.querySelector('.set'); var get = document.querySelector('.get'); var remove = document.querySelector('.remove'); var del = document.querySelector('.del'); set.addEventListener('click', function() { var val = ipt.value; localStorage.setItem('username', val); }) get.addEventListener('click', function() { console.log(localStorage.getItem('username')); }) remove.addEventListener('click', function() { localStorage.removeItem('username'); }) del.addEventListener('click', function() { localStorage.clear(); }) </script> </body>
// 记住用户名 <body> <input type="text" id="username"> <input type="checkbox" name="" id="remember"> 记住用户名 <script> var username = document.querySelector('#username'); var remember = document.querySelector('#remember'); if (localStorage.getItem('username')) { username.value = localStorage.getItem('username'); remember.checked = true; } remember.addEventListener('change', function() { if (this.checked) { localStorage.setItem('username', username.value) } else { localStorage.removeItem('username'); } }) </script> </body>