本地存储
2017-10-08 本文已影响37人
果汁密码
在客户端运行的JS是不能操作用户电脑磁盘中的文件的(保护客户端运行的安全)
JS中的本地存储:
使用JS向浏览器的某一个位置中存储一些内容,浏览器即使关闭了,存储的信息也不会销毁,当在重新打开浏览器的时候我们依然可以获取到上一次存储的信息
1.本地存储的方案:
传统:
- cookie:把信息存储到客户端的浏览器中(但是项目服务器端也是可以获取COOKIE的)
- session:把信息存储到服务器上的(服务器存储)
HTML5:webStorage
- localStorage:永久存储到客户端的本地
- sessionStorage:信息的会话存储,会话窗口存在信息也存在,会话窗口关闭信息就消失了
2、cookie localStorage sessionStorage
- webStorage
setItem([key],[value])
:向客户端的本地存储一条记录;存储的[value]需要是字符串格式的,如果编写的不是字符串,浏览器也会默认转化为字符串然后在进行存储;同源下存储的[key]是不会重复的,如果之前有的话,是把存储的信息值重修的进行修改;
getItem([key])
:获取之前存储的值
removeItem([key])
:移除KEY对应的存储记录
clear()
:把当前源下所有的存储记录都移除掉
localStorage.length
:获取存储的记录条数
localStorage.key(0)
:获取索引为0这一项的KEY是什么
localStorage.setItem('age', JSON.stringify({"jianshu": "简书"}));
console.log(localStorage.getItem('age'));->'{"jianshu":"简书"}'`
localStorage.removeItem('age');`
localStorage.clear();
console.log(localStorage.length);->1
console.log(localStorage.key(0));->'age'
localStorage和sessionStorage的区别:
- localStorage属于永久存储到本地,不管是刷新页面还是关掉页面或者是关掉浏览器,存储的内容都不会消失,只有我们自己手动的去删除才会消失(不是杀毒软件还是浏览器自带的清除历史记录功能都不能把localStorage存储的内容移除掉)
- sessionStorage属于临时的会话存储,只要当前的页面不关闭,信息就可以存储下来,但是页面一但关闭,存储的信息就会自动清除(F5刷新页面只是把当前的DOM结构等进行重新的渲染,会话并没有关闭)
cookie
cookieRender.set({
name: 'age',
value: 1
});
console.log(cookieRender.get('age'));
cookie 和 localStorage的区别:
- cookie兼容所有的浏览器,但是localStorage不兼容IE6~8
- cookie存储内容的大小是由限制的,一般同源下只能存储4KB的内容;
- localStorage存储的内容也有大小限制,一般同源下只能存储5MB;
- cookie存储的内容是有过期时间的,而localStorage是永久存储到本地,使用杀毒软件或者浏览器自带的清除垃圾的功能都可能会把存储的cookie给删除掉
- 用户可能出于安全的角度禁用cookie(无痕浏览器),但是不能禁止localStorage。
真实项目中的本地存储都使用哪些东西?
-
cookie:
记住用户名密码或者是自动登录;用户的部分信息,当用户登录成功后我们会把用户的一些信息记录到本地cookie中,这样在项目中的任何页面都可以知道当前登录的用户是哪一个了;购物车...(存储少量信息或者是需要浏览器兼容的都需要使用cookie来进行存储) -
localStorage:
在PC端我们可以用其存储 某一个JS或者CSS中的源代码;还可以把一些不需要经常更新的数据存储到本地,存储的时候可以设置一个存储的时间,以后重新刷新页面,看一下时间有没有超过预定的时间,如果已经超过了,我们从新获取最新数据,没超过我们使用本地数据;
本地存储都是明文存储
对于重要的信息我们一般不要存储到本地,如果非要存储的话我们需要把存储的信息进行加密
- 可逆转加密:加密完成还可以解密回来
- 不可逆转加密:MD5
escape && unescape
escape && unescape 可以对中文的字符串进行编码和解码,防止传递存储过程中出现乱码,除此之外可以使用的还有很多很多:encodeURI()
decodeURI()
encodeURIComponent()
decodeURIComponent()
...
var str = "简书";
var n = escape(str);
console.log(n) ->"%u7B80%u4E66"
var m = unescape(n);
console.log(m); ->简书
cookieRender
var cookieRender = (function () {
//->设置
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
}
})();