1200字范文 > JavaScript 本地存储 sessionStorage和localStorage

JavaScript 本地存储 sessionStorage和localStorage

时间：2022-03-27 14:25:26

文章目录

本地存储特性window.sessionStoragewindow.localStorage案例：记住用户名

本地存储特性

window.sessionStorage

存储数据：

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

存储数据：

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>