首页
学习
活动
专区
圈层
工具
发布

本地储存之 Cookie、webStorage、indexedDB

localStorage sessionStorage indexedDB 数据声明周期 一般由服务器生成,可以设置过期时间 除非被清理,否在一直存在 页面关闭就清理 除非被清理,否在一直存在 数据储存大小...| 属性 | 作用 | | value | 如何用于保护用户登录态,应该将值加密 | | http-only | 不能通过 JS 访问 Cookie,减少 XSS 攻击 | | secure | 只能在协议为...#优点 后端设置 解决鉴权问题 #缺点 只有 4m,太小 过量的 Cookie 会带来巨大的性能浪费 不能跨域 #Web Storage #localStorage 本地永久储存,除非手动清除,否在一直存在...大小:5M左右 用于储存稳定的资源:如 CSS、js、小图等。...其实我的理解,就是在浏览器或者其他客户端应用缓存一个webapp,一次使用,就将代码都缓存到本地,再次打开无需重复加载。 是不是觉得很熟悉,这不就是微信小程序吗?

1.4K30
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    深入浅出前端本地储存

    今天这篇文章就聊一聊这三种方案的历史,优缺点,以及各自在今天的适用场景 文章在后面还会提出一个全新的,基于 IndexedDB 的,更适合现代前端应用的前端本地储存方案 GoDB.js Cookie...Cookie 的历史 Cookie 早在1994 年就被发明了出来,它的历史甚至和互联网本身的历史一样悠久 和其它两种本地储存方案不一样的是,Cookie 本身并不是为了解决「在浏览器上存东西」而被发明...,直到今天,Cookie 在很多领域仍然有大量的使用 Cookie 的今天 2021 年,虽然 Cookie 在部分领域仍有不可替代的价值,但其已经不再适合被做为一个前端本地储存方案去使用: Cookie...GoDB.js GoDB.js 是一个基于 IndexedDB 实现前端本地储存的类库 帮你做到代码更简洁的同时,更好的发挥 IndexedDB 的实力 ?...对象 大部分情况下能完全替代 Cookie,且更安全 配合 token 可以实现更安全的登录鉴权 IndexedDB 储存空间无上限,功能极其强大 原生支持 JS 对象,能更好的储存数据 以数据库的形式储存数据

    1.2K10

    JS数组操作

    将数组扁平化并去除其中重复数据,最终得到一个升序且不重复的数组 var arr = [[1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [...flat(val) : val), []) } 4、数组合并 请把两个数组 [‘A1’, ‘A2’, ‘B1’, ‘B2’, ‘C1’, ‘C2’, ‘D1’, ‘D2’] 和 [‘A’, ‘B’, ‘...给定一个数组,将数组中的元素向右移动k个位置,其中k是非负数。...nums,编写一个函数将所有0移动到数组的末尾,同时保持非零元素的相对顺序 输入:[0, 1, 0, 3, 12] 输出:[1, 3, 12, 0, 0] 补充:必须在原数组上操作,不能拷贝额外的数组...// 方法1 // 排序数组,再从前往后遍历数组 // 当相邻两个值不相等的时候 len 指针移动 1 位 // 最终 len 的值即为新数组的大小 let removeDuplicates = nums

    11.6K10

    JS之数组

    大家好,我是萧寒,今日分享的是js中的数组。 JS之数组 为什么要学数组? 我们先来思考一个问题,如果我们想储存班级中47个学生的期末成绩,那么该如何存储呢?...什么是数组呢? 数组是一组数据的集合,其中的每个数据被称为元素,在数组中可以存放任意类型的元素,数组是一种将一组数据存储在单个变量名下的优雅方式。...我们能使用手机,电脑正是因为它们存在我们才有机会去使用,数组也是一样,要使用必须自己创建一个数组,在JS中创建数组有一下两种方式 利用new创建数组 利用数组字面量创建数组 利用new创建数组...在JS当中我们压根就不用关心这个问题,因为js的数组中可以存放任意类型的数据,例如字符串,数字,布尔值。 var arr=['小白',121,true,29.9]; //这就很舒服。...法一:修改length长度新增数组元素 可以通过修改length长度来实现数组扩容 length属性即可读 法二:通过修改数组索引新增数组元素 可以通过修改数组索引的方式追加数组元素 不能直接给数组名赋值

    7.9K20

    js数组笔记

    一、定义 数组(array)是按次序排列的一组值。每个值的位置都有编号(从0开始)。整个数组用方括号表示,数组的值用','分割;数组的数据可以是任何类型。...原数组会会变化,截取的部分自动为一个数组返回。...,对数组的每个值执行函数操作,并把结果返回新数组 1)原理:遍历数组,对函数的每个值执行回调函数,返回值组成一个新数组。...原数组不变 2)函数参数: element:数组当前项的值 index:数组当前项的索引(可选) array:数组对象本身(可选) thisArg:执行 callback 函数时使用的this 值(可选...,对数组每一个元素执行callback函数,并将满足条件的值返回新数组 1)原理:遍历数组,对数组每一个元素执行callback函数,并将满足条件的值返回新数组。

    15K30

    本地云桌面储存服务器安全吗 解决了哪些需求

    大家应该知道云桌面是可以在本地使用,也可以在远程登陆的,本地云桌面储存服务器和后者也不同。...存储服务器是否保证安全 本地云桌面储存服务器既可以选择配置在自己的单位和家里,或者也可以选择在其他地方,同样不影响使用,而前者就属于本地云、私有云。...对于本地的来说,所需要保存的数据当然也会存储在私有的服务器之中,而共有的并不会为个体用户专用,所以存储的数据资料也不是在本地的。...两者相比的话,当然是前者安全性更有保障,这也是大家信赖和选择本地云桌面的重要原因之一。 解决了哪些用户需求 这么看来本地云桌面储存服务器是首选,它除了安全之外,还能够解决企业用户的很多需求。...以上就是关于本地云桌面储存服务器的相关介绍,其实以后大多企业使用云桌面是趋势,而伴随着产品的升级进步,相信以后也会解决更多的需求。

    7.2K40

    js数组常用操作

    如果数组已经为空,则 pop() 不改变数组, 并返回 undefined 值。...合并两个数组 a.concat("123"); a.concat(["123"]); concat() 方法用于连接两个或多个数组。 该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。...获取数组中的元素 arrayObject.slice(start,end) start 必需。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。...该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。...排序 a.sort(); 倒序 a.reverse() 该方法会改变原来的数组,而不会创建新的数组。

    3.2K10

    js 数组常用API

    blue”];var color2 = [“yellow”,”black”,”brown”];var color3 = color.concat(color2); // concat 是将参数传递进来的数组内容...拼接到调用者后面,不修改原数组var color4 = color.toString();// 数组转换成以逗号相连的字符串var color5 = color.join(‘+’);// 将数据转换成以参数相连的字符串...var color6 = “red,green+blue”;var color7 = color6.split(‘+’);// 将字符串按参数转换成数组console.log(color); // [“...,从开始参数的开始位置,到参数的结束位置, 不包括结束位置, 不改变原数组var arr = [{“name”: “aa”}, {“age”: 12}];console.log(arr.slice(1,...2)); // [{“age”: 12}]console.log(arr); // [{“name”: “aa”}, {“age”: 12}]// splice() 截取原数组的一段返回新数组, 修改原数组

    3.3K40
    领券