Cookie和webstorage本地储存

傷城~ 2023-07-04 14:29 1阅读 0赞

# Ⅰ- 壹 - Cookie本地储存 #

## 一 什么是Cookie ##

cookies是由网络服务器存储在你电脑硬盘上的一个txt类型的小文件，它和你的网络浏览行为有关，所以存储在你电脑上的cookies就好像你的一张身份证，你电脑上的cookies和其他电脑上的cookies是不一样的;cookies不能被视作代码执行，也不能成为病毒，所以它对你基本无害。cookies的作用主要是，当你访问了某些网页，并且对网页的一些设置进行修改，cookies就能跟踪并记录到这些修改，当你下一次访问这个网页的时候，这个网页会分析你电脑上的cookies，一般用于登录缓存信息和购物车缓存

## 二 Cookie 的特点和缺点 ##

**特点**

1.  cookie必须运行在服务器的环境下(开启服务器)
2.  cookie的容量: 5kt
3.  cookie存储的数据类型:字符串
4.  Cookie本地数据储存，公共存储空间，之前会保存在c盘下，现在会被隐藏
5.  Cookie只能作为临时存储，当浏览器关闭，就会丢失
6.  Cookie的作用域为当前域，有文件夹路径的区分，域中的文件夹储存
    
     *  `http://www.xxx.com/` 在这个域中任何文件都可以写cookie,存储的位置都是以这个域作为存储空间，别的域不可以访问  
        `http://www.xxx.com/index.html` 为顶级域无法访问 `http://www.xxx.com/paimai/index.html` 顶级域无法向下访问，可以向上访问
     *  一-个域名下存放的cookie的个数是有限制的，不同浏览器  
        存放的个数不一样，cookie能 存储的条目数为:50条。  
        如果想长时间存放一个cookie，同时需要设置一个过期时间
7.  Cookie数据跳转到当前域所在另外页面时可以获取前面cookie存储的数据内容（js代码都是针对当前页面的）

**缺点**

1.  cookie可能被禁用。当用户非常注重个人隐私保护时，他很可能禁用浏览器的cookie功能；
2.  cookie是与浏览器相关的。这意味着即使访问的是同一个页面，不同浏览器之间所保存的cookie也是不能互相访问的；
3.  cookie可能被删除。因为每个cookie都是硬盘上的一个文件，因此很有可能被用户删除；
4.  cookie安全性不够高。所有的cookie都是以纯文本的形式记录于文件中，因此如果要保存用户名密码等信息时，最好事先经过加密处理。

**在浏览器中查看已经储存的cookie**

浏览器查看cookie F12 =>Application =>

## 三 创建cookie和获取cookie ##

一个网站可以创建多个cookie，不同的cookie可以拥有不同的值，名字相同会覆盖掉

//单个设置cookie
    document.cookie="name=nihao";
    document.cookie="name=zhangsan";//会覆盖掉上一个cookie
    //获取单个cookie
     console.log(document.cookie);

## 四 设置cookie的过期时间 ##

在不设置过期时间的cookie在未关闭浏览器的时候会一直存放，浏览器关闭，就会丢失掉。设置过期时间必须要用date.toUTCString()

var date=new Date();
          date.setMinutes(6);
          document.cookie="name=xietian;expires="+date.toUTCString();

## 五 Cookie的操作 ##

### 1 获取cookie ###

getCookie(){ 
            return document.cookie.split(/;\s*/).reduce((value,item)=>{ 
               var arr=item.split("=");
                value[arr[0]]=isNaN(arr[1]) ? arr[1] : Number(arr[1]);
                return value;
          },{ })
        }

### 2 根据key获取cookie的值 ###

getCookieValue(){ 
         return getCookie()[key];
    }

### 3 设置cookie的值，第三个参数为过期时间 ###

setCookie(key,value,date){ 
            if(!date){ 
                document.cookie=`${ key}=${ value}`;
                return;
            }
            document.cookie=`${ key}=${ value};expires=${ date.toUTCString()}`;
        }

### 4 设置多个cookie ###

setCookies(obj,date){ 
            for(var key in obj){ 
                Utils.setCookie(key,obj[key],date);
            }
        }

### 5 删除Cookie ###

removeCookie(key){ 
            setCookie(key,"",new Date());
        }

### 6 删除所有的cookie ###

clearCookie(){ 
            for(var key in Utils.getCookie()){ 
                removeCookie(key);
            }
        }

# Ⅱ - 贰 - webstorage本地存储 #

## 一 什么是webstorage ##

类似于cookie 储存量比cookie更大，web storage有自己的方法，不用像cookie需要自己封装，本质为cookie的进阶版

`web storage有两个储存数据的接口:`

localStorage 和 sessionStorage都是window对象的属性

*  localStorage - 没有时间限制的数据存储
 *  sessionStorage - 针对一个 session 的数据存储

`localStorage` 本地存储，用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的；

`sessionStorage`会话存储，用于本地存储一个会话 （session）中的数据，这些数据当在关闭浏览器后数据也随之销毁。

localStorage持久化存储，sessionStorage临时存储

## 二 四个方法使用 ##

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>功能</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>localStorage(sessionStorage).setItem</td> 
   <td>存储数据信息到本地</td> 
  </tr> 
  <tr> 
   <td>localStorage(sessionStorage).getItem</td> 
   <td>读取本地存储信息</td> 
  </tr> 
  <tr> 
   <td>localStorage(sessionStorage).removeItem</td> 
   <td>删除指定key本地存储的值</td> 
  </tr> 
  <tr> 
   <td>localStorage(sessionStorage).clear</td> 
   <td>清空网站在本地保存的所有数据的</td> 
  </tr> 
 </tbody> 
</table>

### 1 setItem()和getItem() ###

*  setItem()：在本地存储中以key键/值的方式存储数据
 *  getItem()：获取本地存储中的数据

localStorage.setItem("name","xietian");
    localStorage.getItem("name")
    
    //也可以直接添加对象的方式设置
    localStorage.name="xietian";
    console.log(localStorage.name);

### 2 removeItem()和clear() ###

*  removeItem()：删除指定key本地存储的值
 *  clear()：清空网站在本地保存的所有数据的

localStorage.removeItem("name");//删除某个数据
    localStorage.clear();//清除所有数据

## 三 使用注意事项 ##

1.  必须是字符串，也只能是字符串
2.  localStorage不能被爬虫抓取到
3.  浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性

**储存数组数据的时候使用**

*  JSON.stringify(对象)：把对象转换成JSON字符串
 *  JSON.parse(json串):把json串转化为对象

var arr=[1,2,3];
    localStorage.arr=JSON.stringify(arr);
     var arr=JSON.parse(localStorage.arr);
    console.log(arr);

# Ⅳ - 肆 - localStorage、sessionStorage与cookie的区别 #

*  cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。
 *  存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
 *  数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
 *  作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。
 *  Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。
 *  Web Storage 的 api 接口使用更方便。

# 0 - 0 - 知识点： #

## 一 XSS攻击 ##

XSS攻击全称跨站脚本攻击，是为不和层叠样式表(Cascading Style Sheets, CSS)的缩写混淆，故将跨站脚本攻击缩写为XSS，XSS是一种在web应用中的计算机安全漏洞，它允许恶意web用户将代码植入到提供给其它用户使用的页面中。  
能被XSS攻击需要以下两点：  
一、需要向web页面注入恶意代码；

二、这些恶意代码能够被浏览器成功的执行。

利用对文本框的内容进行处理 可以预防此类事案发生

var str= `<script>console.log(document.cookie)<\/script>`;
            str=str.replace(/<\/?(script)>/gi,"($1)");
            str=str.replace(/href=('|")javascript:.*?\>/gi,"");
            console.log(str);