cookie本地存储

Posted 2020-09-02

本地存储

所谓的本地存储，其实就是把一些信息，存储到客户端版本地，存储的信息不会因为页面的跳转或关闭而消失，这样就可以实现很多功能需求了。 
特点

• 虽然是存储到本地了，但是有浏览器中间的访问限制，例如：谷歌下存储的信息在IE中访问不到
• 还会存在域名和域名之间的访问限制，例如：在谷歌下访问京东，存储了京东的客户信息，当我们用谷歌浏览器打开了百度，百度是无法获取原来在京东下存储的本地信息的

本地存储应用的案例：

登录的时候，记住用户名和密码，其实就是把信息存储到客户端本地，下一次再打开页面的时候，直接从本地获取上一次存储的信息，然后自动登录后者填充到对应的文本框中

购物车案例：拿京东的购物车举例，在用户没有登录京东的时候，购买的产品都是存储到本地的，进入我的购物车页面，展示的说所有信息都是从本地存储中获取展示的

使用本地存储可以优化网站的性能，避免频繁触发AJAX请求，例如：我们第一次从服务器获取数据，把得到的数据存储到本地一份并且记录存储的时间，当刷新页面的时候，我们先去本地找信息，拿当前时间和之前存储的时间做对比，如果在1MIN之内（时间自己把控），就不再发送AJAX请求，直接视同本地数据展示，如果超过时间，我们重新发送请求，把最新数据拿到后，替换之前本地存储的数据…….

验证用户是否登录：它的原理步骤是，首先当用户登录成功后，我们会在客户端本地存储一些当前登录客户的基本信息（ID/用户名…），当需要验证是否登录的时候（验证是否有登录态），直接到本地去查找有没有存储那些信息，有则代表登录，没有则代表没有登录

前端领域中实现本地存储的技术方式：

• cookie 
  h5中提供的webStorage，其中包含localStorage和sessionStorage，最常用的是localStorage

• 本地数据库存储：webSQL和IndexedDB

• 本地缓存存储：Cache storage 和Application storage 
  其中最常用的就是：cookie和localStorage

cookie

cookie是是目前前端市场上最常用的本地存储方式，它兼容所有的浏览器

• 存储的大小有限制：一般浏览器规定同源下最多只能存储4KB大小
• cookie有过期时间，时间我们可以自己来设置，一般不超过一个月
• cookie不稳定，因为我们可以使用安全卫士或者浏览器的垃圾清理功能把coookie移除掉
• 用户可以根据自己的需求，开启无痕浏览或者隐身模式，这样cookie就不能进行存储了
• cookie不是严格意义上的本地存储，它和服务器之间是有关联的

localStorage

它是H5中提供的本地存储方式，不兼容IE6-8浏览器，我们一般在移动端使用居多，PC端不需要考虑兼容的情况下也可以使用

• 存储也有大小的限制，一般浏览器规定同源下最多存储5MB内容
• 没有过期时间，只要我们不手动清除，永久存储到本地
• localStorage相对于cookie稳定一些，不会被安全卫士或者浏览器自带的垃圾清理功能清除掉
• localStorage不受无痕浏览或者隐身模式的影响
• localStorage是严格的本地存储，和服务器之间没有半毛钱的关系

localStorage的使用发发

1.localStorage.setItem([key],[value])//-->设置本地存储信息
2.localStorage.getItem([key])//-->通过KEY获取本地存储的信息
3.localStorage.removeItem([key])//-->删除指定KEY对应的本地存储信息
4.localStorage.clear();//-->清除当前余下所有本地存储信息
5.    localStorage.key([index]);-->使用localStorage存储的信息是一个Storage集合，会把所有的属性名KEY放在集合中，这个方法就是通过索引获取指定未知的属性名信息
6.    //-->{name:‘珠峰培训‘,age:‘8‘,length:2}
7.    //-->localStorage.key([1]);age  

cookie的使用方法

1.//cookie封装库
2.var cookieRender = (function () {
3.//->设置
4.function setValue(options) {
5.    var _default = {
6.        name: null,
7.        value: null,
8.        expires: new Date(new Date().getTime() + (1000 * 60 * 60 * 24)),
9.        path: ‘/‘,
10.        domain: ‘‘
11.};
12.    for (var key in options) {
13.        if (options.hasOwnProperty(key)) {
14.            _default[key] = options[key];
15.        }
16.    }
17.    document.cookie = _default.name + "=" + escape(_default.value) + ";expires=" + _default.expires.toGMTString() + ";path=" + _default.path + ";domain=" + _default.domain;
18.}
19.
20.//->获取
21.function getValue(name) {
22.    var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
23.    if (arr != null) {
24.        return unescape(arr[2]);
25.    }
26.    return null;
27.}
28.
29.//->删除
30.function removeValue(options) {
31.    var _default = {
32.        name: null,
33.        path: ‘/‘,
34.        domain: ‘‘
35.    };
36.    for (var key in options) {
37.        if (options.hasOwnProperty(key)) {
38.            _default[key] = options[key];
39.        }
40.    }
41.    if (getValue(_default.name)) {
42.        document.cookie = _default.name + "= ;path=" + _default.path + ";domain=" + _default.domain + ";expires=Fri,02-Jan-1970 00:00:00 GMT";
43.    }
44.}
45.
46.return {
47.    set: setValue,
48.    get: getValue,
49.    remove: removeValue
50.}
51.})();
52.//-->设置cookie
53.cookieRender.set({
54.    name:‘‘,
55.    value:‘‘
56.});
57.//-->获取cookie
58.cookieRender.get([key]);
59.//-->删除cookie
60.cookieRender.remove({
61.    name:‘‘
62.}); 

localStorage存储的信息都是字符串，如果我们传递的不是STRING类型的，那么浏览器也会把其转换为字符串类型，然后再进行存储，所以我们从本地获取的结果也是字符串类型的。

本地存储的安全问题

不管是cookie还是localStorage哪一个存储的信息，我们都可以在谷歌控制台的Resources/Application选项中查看到:而且存储的信息都采用的是‘明文存储’，这样导致存储的信息存在安全隐患，所以在真实项目中是不鼓励存储重要信息的，如果非要进行存储的话，需要把存储的信息进行加密。

加密有两种方式

• 可以逆转的加密方式；这个每一个公司用的不太一样，很多公司都是自己开发的加密解密方式
• 不可逆转的加密方式；目前最常用的就是md5加密方式，我们需要导入md5.js,例如密码必须使用不可逆转的加密

MD5的使用方式 
引入MD5.js

1.hex_md5(‘00000000‘);//使用方式，里面的内容是需要加密的东西

MD5是不能解密的，网上说的解密其实就是一个数据库检索碰撞的过程：他们使用算法把一些简单的密码经过MD5的加密，把加密的结果存储到数据库，我们去解密一个结果，后台拿到数据库碰撞，碰上就能解密，碰不了就解密不了。所以我们平时要注意：

• 提醒用户创建密码的时候复杂一些，一般最好是大小写和数字组合，所以一般网站都会有这样要求，需要前端开发需要使用正则进行检测。
• 为了防止用户的密码过于简单，我们一般都会把加密的结果进行二次处理，例如我们可以把前八个后后八个截取掉，然后把剩下的字符按照一定的规律重新的排列组合；

扩展：本地存储的信息如果是中文有可能出现乱码的情况，如何解决？

把中文汉字进行编码，把编码后的结果进行存储，如何编码呢？

• escape、unescape 总结三者的区别
• encodeURI、decodeURI
• encodeURIComponent、decodeURIComponent