IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> js本地存储 -> 正文阅读

[JavaScript知识库]js本地存储

本地存储

js 本地存储主要有以下几种方式

? cookie
? session
? localStorage
? sessionStorage
? indexedDB(待补充)

cookie

cookie,小型文本文件,指某些网站为了辨别用户信息而存储在用户浏览器(即客户端)上的数据。是为了解决 http 无状态导致的问题(问题:多次请求无法区分是否是来自同一用户)。
它存储的文本数据一般不超过 4kb,由一个名称 name、一个值 value 和其它几个可选属性,如:有效期、安全性、使用范围。
由于需要区分用户,所以在每次请求中都会携带这个 cookie,其保存的信息容易被窃取,所以安全性比较低。改进方法就是使用 https 对其加密。
cookie 是有过期时间的,HTTP1.0 使用的是 Expires,HTTP1.1 使用的是 Cache-Control(优先级高于前者)。
Expires 设置的过期时间是一个绝对时间,而 Cache-Control 使用 Max-Age 设置的时间是一个相对时间,相对于现在。
cookie 可以跨域吗?
cookie的"同源策略":仅仅关注 域名,也就是说 cookie 支持跨域访问,只需要设置 domain 属性为 一个域名,
比如设置为".xxx.com",那么以 ".xxx.com"为后缀的一切域名都能够访问该 cookie。

session

http 请求如何携带 session id? session 存储了哪些内容?
session 代表着服务端和客户端一次会话的过程,session 存储量用户的信息以及配置信息。当用户在用一个网站上不同的页面进行跳转的时候,存储在 session 里面的数据不会丢失,而是一直保存在此次会话中。当客户端关闭会话(关闭浏览器)或者 session 超时失效的时候会话结束。
session 它是存储在服务端中的数据。当客户端向服务端发起一次请求,服务端首先会检查此次请求里面是否有一个唯一表示 session id,如果有则说明此前已经给当前用户创建过 session,服务端就通过这个 session id 把这个 session 拿出来使用(如果找不到会新建)。如果没有,那么服务端则会为此用户创建一个 session,并且生成一个唯一标识 session id,并在此次服务端响应过程中返回给客户端保存
保存这个 session id 的形式可以采用 cookie 的方式
cookie 与 session 的区别

  1. 存取数据的类型不同
    cookie 只能存储 ASCII 字符串,session 可以存储任意类型的数据,包括变量

  2. 存储的地点不同
    cookie 存储在客户端,session 存储在服务端

  3. 安全性 / 隐私策略不同
    由于 cookie 存储在客户端,对客户端是可见的,这导致cookie可能被获取、复制以及修改。session 存储在服务端,对客户端是透明的,信息不易泄露出去,比较安全

  4. 服务器压力不同
    由于 cookie 存储在客户端,session 存储在服务端,所以 session 对服务器的压力大,每一个用户都需要创建一个 session,这样就会生成许多 session

  5. 有效期不同
    cookie 可以设置长时间保持,比如默认登录功能,session 一般时间比较短,客户端关闭或者 session 超时时都会失效

  6. 存储大小不同
    单个 cookie 保存的数据不能超过 4 k,session 可以存储的数据远远高于 cookie

  7. 跨域支持上的不同
    cookie的"同源策略":仅仅关注 域名,也就是说 cookie 支持跨域访问,只需要设置 domain 属性为 一个域名,
    比如设置为".xxx.com",那么以 ".xxx.com"为后缀的一切域名都能够访问该 cookie。
    session 不支持跨域

localStorage / sessionStorage

这两个无法设置过期时间,只能存储字符串类型的数据
localStorage
? 生命周期:永久的将数据存储在本地浏览器中,除非手动删除,否则数据永不过期。
? 共享:存储的信息在同一域中是共享的。
? 数据大小:一般能存储的数据大小为 5M。
? 跨域:否,手同源策略的影响
? 数据类型:字符串类型的数据,如果不是字符串需要先转成字符串,通常使用 JSON来处理
sessionStorage
与 localStorage 比较,唯一不同的就是 生命周期,sessionStorage 关闭页面数据就会被删除了。
应用场景
? 标记用户与跟踪用户的行为的情况,推荐使用 cookie
? 适合长期存储在本地的数据,推荐使用 localStorage
? 敏感账号一次行登录,推荐使用 sessionStorage
? 存储大量数据的情况、在线文档保存编辑历史的情况,推荐使用 indexedDB

webStorage如何设置有效期

我想到的就是当我们第一次存储数据的时候保存当前的一个时间戳,记为 first,当我们后续在进入网站的时候拿到当前时间戳,记为 next ,如果 next - first 小于我们设置的有效期,则说明没有过期,如果大于或等于则表明已经过期,这时候手动删除这些存储在 webStorage 的数据
其他方法:

自定义办法设置 localStorage 过期时间
第三方库

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-12-14 15:50:58  更:2021-12-14 15:52:00 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 10:04:37-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码