cookie、sessionStorage，localStorage区别

Liangjia
557 阅读5分钟

Web存储(LocalStorage和SessionStorage)

Web存储(WebStorage)是本地存储，存储在客户端，包括LocalStorage和SessionStorage，以键值对的形式存储。

localStorage

即本地存储，生命周期是永久，除非主动清除，存储数据大小是5Mb，存储在客户端即浏览器中，不与服务端进行通信。

//存储
localStorage.set('name','zhangsan')
//读取
localStorage.get('name')
//删除某个已保存的数据
localStorage.removeItem('name')
//清除所有
localStorage.clear()

image.png

sessionStorage

sessionStorage仅在当前会话有效，关闭页面或浏览器后被清除，存储数据大小是5Mb，存储在客户端即浏览器中，不与服务端进行通信。

使用方法与localStorage一致，就不再赘述。

复杂类型存储

直接存储复杂类型的值是不行的。

image.png

这时需要对数据转换:

  • 存储数据前：将数据通过JSON.stringify()转换为Json字符串。
  • 读取数据时：将数据通过JSON.parse()对Json字符串转换为对象。
let obj = {
  name: 'zhangsan',
  age: 14
};
localStorage.setItem("data",JSON.stringify(obj));
let getObj = localStorage.getItem("data",JSON.parse(obj));

image.png

cookie

概念

cookie是客户端与服务端进行会话时本地化存储技术（保存在浏览器端），cookie就是服务端发给客户端的文本，用于辨别用户身份。

cookie机制

由浏览器所提供，将document的cookie赋给JavaScript对象，可以由Javascript对象控制，以键值对形式存储。它的本质就是对应一个域名，当浏览器再次访问这个域名时，使得这个cookie可以用。

cookie用处

  • 保持登录状态
  • 跟踪用户行为
  • 定制页面
  • 购物车

JS操作cookie：

<script language=javascript> 
    //添加cookie
    function setCookie(name,value,time){ 
        var date= new Date(); 
        //设置cookie的有效期
        date.setDate(date.getDate()+time); 
        document.cookie = name+"="+value+";expires="+date; 
    } 

    //获得cookie
    function getCookie(name){ 
        var arr = document.cookie.split(";"); 
        for(var i=0; i<arr.length; i++){ 
        var arr2 = arr[i].split("="); 
            if(arr2[0] == name){ 
                return arr2[1]; 
            } 
        } 
        return null; 
    } 

    //删除cookie（只需将相同cookie的时间设成0就可以了）
    function removeCookie(name){ 
        setCookie(name,"",0) 
    } 
</script>

注意

如果保存用户的重要信息，那么应该将信息进行加密后再保存到cookie中，使用时先解析在进行其他操作。

session

session机制

当服务器接收到请求后需要创建session对象后，首先检查客户端请求中是否包含sessionid，有就根据该sessionid返回对象session对象，没有创建新的session对象并且返回该sessionid。则要使用URL重写，可以通过response.encodeURL(url) 进行实现；API对encodeURL的结束为，当浏览器支持Cookie时，url不做任何处理；当浏览器不支持Cookie的时候，将会重写URL将SessionID拼接到访问地址后。

cookie和session区别

  1. 存储内容：cookie只能存储字符串类型，session通过类似hashtable类型来存储，能支持任何类型对象。
  2. 存储大小：cookie存储大小上限为4kb，session无限制。
  3. 安全性：cookie存在的攻击，cookie获取，cookie欺骗。session安全性比cookie要好，原因如下：
    • sessionid存储在cookie中，想要攻破session，先得攻破cookie。
    • sessionid在有人登录或者启动session_start的情况才会有，所以攻破session也不一定有。
    • 第二次启动session_start后，前一次的sessionID就是失效了，session过期后，sessionID也随之失效。
    • sessionid是经过加密的。

应用场景

cookie

  1. 判断用户是否访问过网站，以便下次实现自动登录或记住密码。
  2. 保存上次登录时间等信息。
  3. 保存上次查看的页面。
  4. 浏览计数。

image.png

session

用来保存用户的专用信息，变量的值存放在服务器端，用来区分不同的用户。

  1. 购物车。
  2. 保存用户登录等信息。
  3. 防止用户非法登录。

缺点

cookie

  1. 大小受限
  2. 每次都要携带cookie到服务器，浪费带宽。
  3. 有些状态不合适存放在客户端。
  4. 用户可以操作禁用cookie，使功能受限。
  5. 安全性低。

session

  1. 当用户流量大时，那么session保存的东西也就越多，服务器造成的压力也越大。
  2. 依赖cookie，当用户cookie禁用后，重写URL不安全。
  3. 过度使用session保存的变量，代码维护性也越低。

webStorage

webStorage目的是客服由cookie带来的一些限制，当数据需要严格控制在客户端时，不需要持续的将cookie发送到服务器。 webStorage的两个主要目标：

  1. 提供在cookie之外存储会话的路径。
  2. 提供存储大量可以跨会话存在的数据机制。 Html5的webStorage提供了两种API：localStorage、sessionStorage。
  3. 生命周期：localStorage生命周期是永久的，关闭浏览器localStorage里的数据也不会消失，除非主动去删除。sessionStorage生命周期仅在当前会话有效，它引入了"浏览器窗口"的概念，它是在同源窗口始终存在的数据，只要浏览器没关闭和刷新或者进入其他页面，数据依然存在。但是关闭浏览器窗口数据就会消失，打开同一个窗口同一个页面，数据也是不一样的。
  4. 存储大小：两者都是5MB。
  5. 存储位置：两者数据都是保存在客户端，不与服务器进行通信。
  6. 存储类型：都是以字符串的形式存储，转换需要用到JSON对象的JSON.stringify和JSON.parse。
  7. 获取方式：localStorage,window.localStorage。sessionStorage,window.sessionStorage。
  8. 应用场景：localStorage为长期登录并且长期保存在本地的数据。sessionStorage，敏感性账号一次性登录。

优点

  1. 存储空间：cookie为4MB，webstorage为5MB。
  2. 节省网络流量：webstorage不会传送到服务器，可以直接获取。不像cookie每次需要携带传送到服务器，节省了网络流量。
  3. 对于用户只要浏览一组页面就关掉浏览器丢掉的数据，sessionStorage会非常方便。
  4. 快速显示：有的数据存储在webStorage加上浏览器的缓存，从本地获取数据要比服务器快的多。
  5. 安全性：webstorage不会随着Http header发送到服务器。安全性相对cookie较高，不用担心截获。但也有伪造的可能。
  6. webStorage提供了方法，比cookie操作更方便：
setItem(key, value)—— 保存数据， 以键值对的方式储存信息。
getItem(key)—— 获取数据， 将键值传入， 即可获取到对应的value值。
removeItem(key)—— 删除单个数据， 根据键值移除对应的信息。
clear()—— 删除所有的数据
key(index)—— 获取某个索引的key
avatar
文章
阅读
粉丝