基于js 本地存储 | 详解

在客户端运行的JS是不能操作用户电脑磁盘中的文件的（保护客户端运行的安全）

1、JS中的本地存储：

使用JS向浏览器的某一个位置中存储一些内容，浏览器即使关闭了，存储的信息也不会销毁，当在重新打开浏览器的时候我们依然可以获取到上一次存储的信息

本地存储的方案：

传统：

cookie:把信息存储到客户端的浏览器中（但是项目服务器端也是可以获取COOKIE的）

session:把信息存储到服务器上的（服务器存储）

HTML5:webStorage

localStorage:永久存储在客户端的本地

sessionStorage:信息的会话存储，会话窗口存在信息也存在，会话窗口关闭信息就消失了

2、COOKIE localStorage sessionStorage

->webStorage

setItem([key],[value])：像客户端的本地存储一条记录，存储的[value]需要是字符串格式的，如果编写的不是字符串，浏览器会默认的转化为字符串然后在进行存储；同源下存储的[key]是不会重复的，如果之前有的话，是把存储的信息值进行修改。如果存储的value是一个对象，需要先使用JSON.stringify()进行转化。

getItem([key]):获取之前存储的值

removeItem([key]):移除KEY对应的存储记录

clear()：把当前源下的所有的存储记录都移除掉

localStorage.length：获取存储的记录条数

localStorage.key(0)：获取索引为0这一项的KEY是什么

localStorage.setItem('age',7);

localStorage.getItem('age');

localStorage.removeItem('age');

localStorage.clear();

localStorage和sessionStorage的区别

localStorage属于永久存储在本地，不管是刷新页面还是关掉页面或者关闭浏览器，存储的内容都不会消失，只有我们自己手动的去删除才会消失（不管是杀毒软件还是浏览器自带的清除历史记录功能都不能把localStorage存储的内容清除掉）

sessionStorage属于临时的会话存储，只要当前的页面不关闭，信息就可以存储下来，但是页面一旦关闭，存储的信息就会自动清除（F5刷新页面只是把当前的DOM结构等进行重新的渲染，会话并没有关闭）