JS中的本地存储
在客户端运行的JS是不能操作用户电脑磁盘中的文件的（保护客户端运行的安全）
JS中的本地存储：
使用JS向浏览器的某一个位置中存储一些内容，浏览器及时关闭了，存储的信息也不会销毁，当再重新打开浏览器的时候，我们依然可以获取到上一次存储的信息
本地存储和缓存是不一样的，本地存储有本地存储的点，缓存有缓存的点。记住用户名密码，购物车等就属于本地存储
本地存储方案：
传统：
1.cookie：把信息存储到客户端的浏览器中（但是项目服务器端也是可以获取cookie的）
2.session：吧信息存储到服务器上，不属于本地存储，属于服务器存储
HTML5：webStorage
1.localStorage：永久存储到客户端本地
2.sessionStorage：信息的会话存储，会话窗口存在信息也存在，会话窗口关闭信息就消失
商品加入购物车的过程：
①先将当前用户加入购物车的这条信息存到本地cookie一份
②再存到服务器中的session中一份
③再存到服务器的数据库中一份
不仅存了当前这条购物车信息之外，还存了客户端的IP地址，如果登录了还需要记录用户账号
好处：实现多设备之间，同一个账号能够一起购买
cookie的操作
存储：document.cookie = "age=7"
获取：document.cookie
document.cookie = "age=7";
console.log(document.cookie); //age=7
cookie.js
var cookieRender = (function(){
//设置，expires过期时间，path路径，domain当前的一个域
function setValue(options){
var _default = {
name: null,
value: null,
expires: new Date(new Date().getTime() + (1000 * 60 * 60 * 24)),
path: '/',
domain: ''
};
for (var key in options) {
if(options.hasOwnProperty(key)){
_default[key] = options[key];
}
}
document.cookie = _default.name + "=" + escape(_default.value) +
";expires=" + _default.expires.toGMTString() +
";path=" + _default.path + ";domain=" + _default.domain;
}
//获取，正则匹配
function getValue(name){
var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
if (arr != null) {
return unescape(arr[2]);
}
return null;
}
//删除:原理就是让过期时间变成一个今天日期之前的
function removeValue(options){
var _default = {
name: null,
path: '/',
domain: ''
};
for (var key in options) {
if(options.hasOwnProperty(key)){
_default[key] = options[key];
}
}
if (getValue(_default.name)) {
document.cookie = _default.name + "= ; path=" + _default.path +"; domain="
+ _default.domain + ";expires=Fri, 02-Jan-1970 00:00:00 GMT";
}
}
return {
set: setValue,
get: getValue,
remove: removeValue
}
})();
escape && unescape 可以对中文的字符串进行编码和解码，防止传递存储过程中出现乱码
除此之外，还有encodeURI() && decodeURI() ， encodeURIComponent() && decodeURIComponent()
localStorage的操作
存储：localStorage.setItem([key],[value]) => 向客户端本地存储一条记录，存储的[value]需要是字符串格式的，如果编写的不是字符串，浏览器会默认转换成字符串然后再进行存储，
同源下存储的[key]是不会重复的，如果之前有的话，是把存储的信息重复的进行修改
获取：localStorage.getItem([key]) => 获取之前存储的值
移除：localStorage.
removeItem([key]) => 移除key存储的值
都移除：localStorage.clear() => 把当前源下所有存储记录都移除掉
条数：localStorage.length() => 获取存储的记录条数 => '1'
索引值：localStorage.key(0) => 获取索引为0的一项的key值是什么 => ‘age’
localStorage.setItem('age',7);
localStorage.getItem('age'); // 得到的是字符串类型的 ‘7’
localStorage.setItem('age',{zhufeng：‘珠峰’});
localStorage.getItem('age'); // [Object,Object]
localStorage.setItem('age', JSON.stringify({"zhufeng"："珠峰"}));
localStorage.getItem('age'); // {"zhufeng"："珠峰"}
数组 toString()是转换成字符串
对象 toString()是不仅仅是转换字符串，而且是用来检测数据类型的
sessionStorage的操作
获取：sessionStorage.getItem([key])
移除：sessionStorage.removeItem([key])
都移除：sessionStorage.clear()
条数：sessionStorage.length()
索引值：sessionStorage.key(0)
localStorage和sessionStorage的区别
localStorage => 属于永久存储到本地，不管是刷新页面还是关闭浏览器，存户的内容都不会消失，只有我们自己手动删除才会消失（①在控制台resource里面找到对象摁住delete，②使用JS里面的removeItem([key]) 或者clear()方法来清除），不管是杀毒软件还是浏览器自带的清除历史记录的功能，都不能把localstorage存储的内容移除掉
sessionStorage => 属于临时会话存储，只要当前的页面不关闭，信息就可以存储下来，但是页面一旦关闭，存储的信息就会自带清除（F5刷新页面只是把当前的DOM结构等进行重新的渲染，会话并没有关闭）
localStorage和cookie的区别
cookie是 兼容所有的浏览器。localStorage是不兼容IE6.7.8。
cookie存储内容大小是有限制的，一般同源下只能存储4KB的内容。
localStorage
存储的内容大小也有限制，一般同源下只能存储5MB。
cookie存储的内容是有过期时间的。localStorage存储到本地是永久的。使用杀毒软件或者浏览器自带的清除垃圾功能都可能会把存储的cookie给删除点，而localStorage不会
用户可能出于安全的角度，禁用cookie（无痕浏览器），但是不能禁止localStorage。
真实项目中的本地存储都使用在哪些地方？
cookie：
记住用户名密码或者自动登录：用户的部分信息，当用户登录成功后我们会把用户的一些信息记录到本地的cookie中，这样在项目中的任何页面都可以知道当前登录的用户是哪一个了。还要购物车等。。。（存储少量信息或者需要浏览器兼容的都需要使用cookie来进行存储）
localStorage：
在PC端我们可以用其存储某一个JS或者CSS中的源代码（性能优化，减少http请求）。还可以把一些不需要经常更新的数据存储到本地，存储的时候可以设置一个存储的时间以后重新刷新页面，看一下时间有没有超过预定的时间，如果已经超过了，我们重新获取最新数据，没超过我们用本地数据
本地存储都是明文存储
对于重要的信息，我们一般不要存储到本地，但是如果非要存储的话，我们需要把存储的信息进行加密
--> 可以逆转加密：加密完成还可以解密回来
--> 不可逆转加密：MD5，