JavaScript学习篇--本地存储

在客户端运行的js是不能操做用户电脑磁盘中的文件的（这是为了保护客户端运行的安全）。

一、js中的本地存储：

使用js向浏览器的某一个位置中存储一些内容，浏览器即便关闭了，存储的信息也不会销毁，当在从新打开浏览器的时候咱们依然能够获取到上一次存储的信息。

本地存储的方案：

传统：

cookie：把信息存储到客户端的浏览器中（可是项目服务器端也是能够获取cookie的）

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

HTML5：webstorage

localstorage：永久存储在客服端的本地。

sessionstorage：信息的会话存储，会话窗口存在信息也存在，会话窗口关闭信息也就消失了。

二、cookie localstorage sessionstorage

->webStorage

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

getltem([key]):获取以前存储的值；

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

clear():把当前源下的全部的存储记录都移除掉

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

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

localStorage.setltem('age',7);

localStorage.getltem('age');

localStorage.removeltem('age');

localStorage.clear();

localStorage和sessionStorage的区别

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

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

cookie

document.cookie = 'age = 7'

cookie和localStorage的区别

1）、cookie

cookie存储内容的大小是有限制的，通常同源下只能存储4kb的内容；localStorage存储的内容也有大小限制，通常同源下只能存储5MB

cookie存储的内容是有过时时间的，而localStorage是永久存储到本地，使用杀毒软件或者浏览器自带的清除垃圾的功能都有可能把存储的cookie给删除掉

用户可能处于安全的角度禁用cookie（无痕浏览器），可是不能禁止localStorage

真实的项目中的本地存储都使用哪些东西？

记住用户名密码或者自动登陆；用户的部分信息，当用户登陆成功后咱们会把用户的一些信息记录到本地的cookie中，这样在项目中的任何页面均可以知道当前登陆的用户是哪个了；购物车..（存储少许信息或者是须要浏览器兼容的都须要使用cookie来进行存储）

2）、localStorage

在pc端咱们能够用其存储某一个js或者css中的源代码；还能够把一些不须要常常更新的数据存储到本地，存储的时候能够设置一个存储的事件，之后从新刷新页面，看一下时间有没有超过预约的时间，若是已通过时了，咱们重新获取最新数据，没超过咱们仍是继续使用本地数据。

本地存储都是明文存储

对于重要的信息咱们通常不要存储到本地，若是非要存储的话咱们须要把存储的信息进行加密

可逆转加密：加密完成还能够解密回来

不可逆转加密：MD5