目录
一、cookie sessionStorage localStorage 区别
二、cookie sessionStorage localStorage 共同点
三、cookie sessionStorage localStorage具体用法
四、 localStorage JS原生实现
五、sessionStorage JS原生实现
一、cookie sessionStorage localStorage 区别
cookie是由服务器端写入的，而SessionStorage、 LocalStorage都是由前端写入的，cookie的生命周期是由服务器端在写入的时候就设置好的，LocalStorage是写入就一直存在，除非手动清除，SessionStorage是页面关闭的时候就会自动清除。
二、cookie sessionStorage localStorage 共同点
都是存储在浏览器本地的
三、cookie sessionStorage localStorage具体用法
Cookie、SessionStorage、 LocalStorage数据共享都遵循同源原则，SessionStorage还限制必须是同一个页面。在前端给后端发送请求的时候会自动携带Cookie中的数据，但是SessionStorage、 LocalStorage不会 加分回答 由于它们的以上区别，所以它们的应用场景也不同，Cookie一般用于存储登录验证信息SessionID或者token，LocalStorage常用于存储不易变动的数据，减轻服务器的压力，SessionStorage可以用来检测用户是否是刷新进入页面，如音乐播放器恢复播放进度条的功能。
四、 localStorage JS原生实现
我们先给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 JS原生实现
基本操作如上，主要部分替换如下代码段
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>
结束语：
让我们一起进步，拿到自己想要的offer
