js的本地存储（原生JavaScript实现本地存储（localStorage）和会话存储（sessionStorage））
目录
一 、简单介绍
二 、localStorage本地存储
三 、sessionStorage会话存储
一 、简单介绍
本地存储和会话存储的目的 ，是将所输入的文件存入到浏览器中 ，在需要的时候 ，直接调用 ，但是本地存储和会话存储有着一定的区别 ，本地存储 ，在不主动删除的情况下,会一直保留在浏览器中 ，会话存储是 ，当前保存的内容 ，页面刷新还会保留在浏览器中 ，但是关闭页面在打开时 ，会发现没有数据了 。这是他们两的用处和区别 。
二 、localStorage本地存储
如下代码
我们先给button一个监听事件 ，让我们有存入的动作
这里是想在提交后也能在页面上显示 ，所有定义了一个li来吧input的value值赋值到ul里面
这里使用了insertBefore在添加时 ，会在最上方
这里arr是自己定义的数组
存储和获取都是通过函数封装
savaData(arr)就是将input的值存储到了浏览器
window.localStorage.setItem(input, JSON.stringify(title)) 保存的代码title是形参 ，input自己取得
获取let data = window.localStorage.getItem(input) 上面取的input
这里有个if判断是判断这里data是否有内容 ，有就return JSON.parse(data) 没有就return[]主要是得到所有内容的数组
代码段也有注释解释
<style> li { list-style: none; } </style> </head> <body> <input type="text" placeholder="输入内容"><button>提交</button> <hr> <ul></ul> <script> let input = document.querySelector(input) let btn = document.querySelector(button) let ul = document.querySelector(ul) btn.addEventListener(click, function () { let arr = getData() //调用内容 ，是为了获得已经存入的内容 ，不然会出现内容覆盖 let li = document.createElement(li) li.innerHTML = input.value; //表单值给到li ul.insertBefore(li, ul.children[0]);//在把值给到ul添加值会在第一个 arr.push(input.value) saveData(arr) input.value = //为好看 ，输入过后表单的内容自动清空 }) function saveData(title) { window.localStorage.setItem(input, JSON.stringify(title)) } function getData(get) { let data = window.localStorage.getItem(input) console.log(data);//打印所取到的值 ，但是第一次为空 ，因为浏览器里面没有值 if (data != null) { return JSON.parse(data) } else { return [] } } </script> </body>三 、sessionStorage会话存储
与本地存储的使用没有区别 ，只要在跟换单词即可
window.sessionStorage.setItem(input, JSON.stringify(title))
let data = window.sessionStorage.getItem(input)
<style> li { list-style: none; } </style> </head> <body> <input type="text" placeholder="输入内容"><button>提交</button> <hr> <ul></ul> <script> let input = document.querySelector(input) let btn = document.querySelector(button) let ul = document.querySelector(ul) btn.addEventListener(click, function () { let arr = getData() let li = document.createElement(li) li.innerHTML = input.value; ul.insertBefore(li, ul.children[0]); arr.push(input.value) saveData(arr) input.value = }) function saveData(title) { window.sessionStorage.setItem(input, JSON.stringify(title)) } function getData(get) { let data = window.sessionStorage.getItem(input) console.log(data); if (data != null) { return JSON.parse(data) } else { return [] } } </script> </body>创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！