web存储和cookie

喜欢ヅ旅行 2022-12-17 10:57 125阅读 0赞

## 总结 ##

#### cookie的使用（node） ####

第一步 安装cookie-parser yarn add cookie-parser --save / npm install cookie-parser --save

#### 使用 ####

// 引入cookie-parser
        var express = require('express');
        var app = express();
        var cookieParser = require('cookie-parser');
        app.use(cookieParser('string')) // 传入的字符串可以作用加密模式使用
        app.get('/', function(req, res) { 
            // 设置cookie
            // maxAge cookie过期时间 以毫秒数的形式表现
            res.cookie('name', "要存储的数据", { 
                maxAge: 1000,//过期时间 以毫秒数的形式表现
                signed: false, // false表示设置cookie不适用加密 反之则进行加密
                expires: Date, // 也是cookie的过期时间 他是以日期的形式表现
                path: '', // 设置可以获取cookie的路径
                domain: '' // 设置可以获取cookie的第二域名
            })
        })

#### web存储 ####

*  localStorage

// 设置存储的数据的方法 第一个参数是要存储的数据的名称-名称可以自定义 第二个参数是要存储的数据
        // 当存储的数据的数据类型是引用类型时 要使用json的形式保存数据
        var obj = { 
            name: "李狗蛋儿"
        }
        localStorage.setItem('name', JSON.stringify(obj))
    
        // 获取localStorage的数据的方法 参数是要获取的存储数据的名称
        // 当要获取的数据还未存储时获取到的值是null
        var data = localStorage.getItem('name')
        console.log(data) // { "name": "李狗蛋儿" }
        // 清除web存储的方法 clear 会清除所以的web存储数据
        // localStorage.clear()
        localStorage.removeItem('name') // 指定要删除的存储数据

*  sessionStorage

// 设置存储的数据的方法 第一个参数是要存储的数据的名称-名称可以自定义 第二个参数是要存储的数据
      // 当存储的数据的数据类型是引用类型时 要使用json的形式保存数据
      var obj = { 
          name: "李狗蛋儿"
      }
      sessionStorage.setItem('name', JSON.stringify(obj))
    
      // 获取localStorage的数据的方法 参数是要获取的存储数据的名称
      // 当要获取的数据还未存储时获取到的值是null
      var data = sessionStorage.getItem('name')
      console.log(data) // { "name": "李狗蛋儿" }

#### 三者的区别 ####

*  cookie 存储空间只有4k cookie存储的数据可以再服务端和客户端穿梭 而且cookie可以设置要使用的路径、过期时间 、能使用cookie的域名等等
 *  localStorage 存储空间相对较大 有5兆左右 存储的数据没有时间限制 除非手动清除 他是用于客户端
 *  sessionStorage 存储的数据会在浏览器关闭 或者 当前页签关闭时清除 存储空间相对较大 有5兆左右