精华内容
下载资源
问答
  • 前端本地存储的方法
    2020-12-20 10:40:49

    本地存储有三种方法localstorage、sessionStorage、cookie

    区别

    cookie存值大小4kb,使用时得封装,默认存储时间7天
    localStorage存值5MB,存储时间永久
    sessionStorage为会话级别,页面关闭以后会销毁

    localStorage存取值

    //存
    let ls=localStorage
    ls.setItem("username","奥特曼")
    //或者
    ls.username="奥特曼"
    //取
    ls.getItem("username")
    

    sessionStorage存取值

    //存
    let ss=sessionStorage
    ss.setItem("username","奥特曼")
    //或者
    ss.username="奥特曼"
    //取
    ls.getItem("username")
    

    这两者存取方法是一样的

    cookie存取值

    //存
     document.cookie = "name=laowang"
      document.cookie = "pwd=123456";
     //取
            let arrCookie = strCookie.split("; ");
            for(let t in arrCookie){
                //console.log(arrCookie[t]);
                let item = arrCookie[t].split("=");
                console.log("姓名"+item[0],"密码"+item[1]);
            }
    

    cookie封装

    //getCookie
    	function getCookie(key){
    		let strCookie = document.cookie;
    		let arrCookie = strCookie.split("; ");
    		
    		for(let i=0; i<arrCookie.length; i++){
    			let item = arrCookie[i].split("=");
    			
    			if(item[0] == key){
    				return item[1];
    			}
    		}
    		
    		return "";
    	}
    	
    	//console.log(getCookie("name"));
    	
    	//setCookie
    	function setCookie(key,value,date){
    		let d = new Date();
    		d.setDate(d.getDate()+date);
    		document.cookie = key+"="+value+";expires="+d;
    	}
    	//setCookie("pwd","123456",10);
    	
    	//delCookie
    	function delCookie(key){
    		setCookie(key,"",-1);
    	}
    	delCookie("name");
    
    更多相关内容
  • 浏览器的本地存储共分为五种,包括 Local Storage、Session Storage、IndexedDB、Web SQL、Cookies,本篇博客主要对常用的 Cookie、LocalStorage、SessionStorage 存储机制进行介绍,如有不正之处,欢迎指出。

    浏览器的本地存储共分为五种,包括 Local Storage、Session Storage、IndexedDB、Web SQL、Cookies,如下图所示:
    在这里插入图片描述
    本篇博客主要对常用的 Cookie、LocalStorage、SessionStorage 存储机制进行介绍,如有不正之处,欢迎指出。


    Cookie

    # Cookie 介绍

    Cookie 的本职工作并非本地存储,而是“维持状态”,说白了它就是存储在浏览器里的一个文本文件,用于在浏览器和服务器之间进行信息传递。它附着在 HTTP 请求上,可以携带用户信息,服务器通过检查 Cookie 来获取客户端的状态。

    在浏览器按下 F12 查看 Application,可以看到它的几个核心属性:Name,Value,Domain,Expires 以及 Path,如下图所示:
    在这里插入图片描述
    每个属性代表的含义如下:

    Name:Cookie 的名称;

    Value:Cookie 的值;

    Domain:可以访问此 Cookie 的域名;

    Path:可以访问此 Cookie 的页面路径;
    比如 domain 是 baidu.com,path 是 /s,那么只有 /s 路径下的页面才可以读取此 Cookie。

    expires/Max-Age :Cookie 的超时时间;
    1.若设置其值为一个时间,那么当到达此时间后,Cookie 会自动失效。
    2.不设置的话默认值是 Session,是指当前 Cookie 会和 Session 一起失效。也就是当整个浏览器关闭后,此 Cookie 才会失效。

    Size:Cookie 的大小;

    HTTP: Cookie 的 httponly 属性;
    若属性为 true,只有在 HTTP 请求头中会带有此 Cookie 的信息,而不能通过 document.cookie 来进行访问。

    Secure:设置是否只能通过 https 来传递此条 Cookie;

    # Cookie 特点

    Cookie 有以下 6 个特点:

    • 不同浏览器存放的 Cookie 位置不一样,不能通用;
    • Cookie 的存储是以域名形式进行区分的,不同域下存储的 Cookie 是相互独立的,我们可以设置 Cookie 生效的域(当前设置 Cookie 所在域的子域),也就是说,我们能够操作的 Cookie 是当前域以及当前域下的所有子域;
    • 一个域名下存放的 Cookie 的个数是有限制的,不同的浏览器存放的个数不一样,一般为 20个;
    • 每个 Cookie 存放的内容大小也是有限制的,不同的浏览器存放大小不一样,一般为 4KB;
    • Cookie 可以设置过期时间,默认是会话结束的时候,时间到期自动销毁;
    • 存储数据类型存在限制,只能存储字符串;

    # Cookie 劣势

    主要有两个方面的劣势:

    1. Cookie 存储容量小

    Cookie 本身是有体积上限的,它最大只能有 4KB。当超过 4KB 时,将会被裁切,所以 Cookie 只能用来存取少量信息。

    2. 过量 Cookie 会带来巨大的性能浪费

    Cookie 是按照域名进行分割的,我们可以通过响应头里的 Set-Cookie 指定要存储的 Cookie 值。默认情况下,Domain 被设置为设置 Cookie 页面的主机名,我们也可以手动设置 Domain 的值:

    Set-Cookie: name=zhangsan; domain=http://baidu.com
    

    同一个域名下的所有请求都会携带 Cookie,也就是说,如果我们仅是请求一张图片或者一个 CSS 文件,都要一直携带着进行通信(无论 Cookie 里面存储的信息是否需要),随着请求的叠加,带来的开销将是无法想象的。

    为了弥补 Cookie 的局限性,让 “专业的人做专业的事情”,Web Storage 出现了。

    Web Storage 是 HTML5 专门为浏览器存储而提供的数据存储机制,它又分为 Local StorageSession Storage,我们先来看 Local Storage


    Local Storage

    # Local Storage 介绍

    Local Storage 是 HTML5 的新方法,兼容 IE8 及以上浏览器。它是一种持久化的本地存储,数据永不过期,除非手动删除。同时它受同源策略的限制,只在同一域中进行共享,也就是说不同的网站不能直接共用相同的 Local Storage。

    Local Storage 允许在浏览器中存储 key / value 对的数据,如下图所示,它没有 Cookie 那么多的属性,保存的数据也没有过期时间。
    在这里插入图片描述

    # Local Storage 特点

    • Local Storage 拓展了 Cookie 的 4K 限制;
    • Local Storage 可以将第一次请求的数据直接存储到本地,相当于一个 5M 大小的前端页面数据库,相比于 Cookie 更节约带宽,不过只在高版本的浏览器中才支持;
    • 生命周期:持久化的本地存储,除非主动删除数据,否则数据永远不会过期;
    • 存储的信息在同一域中是共享的,受同源策略的限制;
    • 当本页操作(新增、修改、删除)了 Local Storage 的时候,本页面不会触发 storage 事件,但是别的页面会触发;
    • 在非 IE 下的浏览中可以本地打开,IE 浏览器要在服务器中打开;
    • Local Storage 本质上是对字符串的读取,如果存储内容过多会消耗内存空间,导致页面变卡;

    # Local Storage 应用实例

    // 存储
    localStorage.setItem("lastname", "Gates");
    // 获取
    document.getElementById("result").innerHTML = localStorage.getItem("lastname");
    

    也可以写成这种形式:

    // 存储
    localStorage.lastname = "Gates";
    // 获取
    document.getElementById("result").innerHTML = localStorage.lastname;
    

    删除 localStorage 存储内容:

    // 删除单个存储内容
    localStorage.removeItem("lastname");
    // 清空所有存储内容
    localStorage.clear();
    

    Session Storage

    # Session Storage 介绍

    Session Storage 用于存储本地一个会话(Session)中的数据,只有在同一个会话中的页面才能访问这些数据,并且当会话结束后数据也随之销毁。

    因此 Session Storage 不是一种持久化的本地存储,仅仅是会话级别的存储。也就是说只要浏览器窗口没有关闭,即使刷新页面或进入同源的另一页面,数据仍然存在。而当关闭窗口后,Session Storage 就会被销毁,或在新窗口打开同源的另一个页面,Session Storage 也是同样不存在的。
    在这里插入图片描述
    在浏览器按下 F12 可以看出,Session Storage 和 Local Storage 一样,都比较简单,只存储了 key / value 对的数据,没有过期时间等属性。

    # Session Storage 特点

    • 页面会话在浏览器打开期间一直保持,并且重新加载或恢复页面仍会保持原来的页面会话;
    • 在新标签或窗口打开一个页面时,会复制顶级浏览会话的上下文作为新会话的上下文;
    • 打开多个相同的 URL 的 Tab 页面,会创建各自的 Session Storage;
    • 关闭对应浏览器窗口(Window)或者 Tab 页面,会清除对应的 Session Storage;
    • 存储大小一般为 5M;
    • 存储的对象类型均为字符串类型;

    # Session Storage 应用实例

    保存数据:

    sessionStorage.setItem("key", "value");
    

    读取数据:

    var lastname = sessionStorage.getItem("key");
    

    删除指定键数据:

    sessionStorage.removeItem("key");
    

    删除所有数据:

    sessionStorage.clear();
    

    本篇博客参考了以下文章,在此深表感谢:
    https://www.cnblogs.com/tzyy/p/4151291.html
    https://segmentfault.com/a/1190000012578794
    https://zhuanlan.zhihu.com/p/421856737
    https://www.jianshu.com/p/47717c55381d

    展开全文
  • 聊聊前端本地存储

    2020-12-24 15:41:56
    FE常用到的前端本地存储包括:cookie、localStorage、sessionStorage。 2.区别是什么? 3.怎么用? 开发过程中,我们经常会用到的就是cookie和localStorage了。 凡是用到身份认证的网站或者系统都会用到cookie,...

    1.有哪些?

    FE常用到的前端本地存储包括:cookie、localStorage、sessionStorage。

    2.区别是什么?
    在这里插入图片描述

    3.怎么用?

    开发过程中,我们经常会用到的就是cookie和localStorage了。

    凡是用到身份认证的网站或者系统都会用到cookie,关于cookie是什么,怎么用?

    localStorage常用于存储项目中一些需要记忆用户操作的数据,比如快捷键、临时数据等,这是提高用户体验的一种好方法。

    4.注意
    (1)localStorage在Safri浏览器无痕模式下的异常case

    (2)作用域的问题

    localStorage只要在同源(相同的协议、相同的主机名、相同的端口)下,就能读取/修改到同一份localStorage数据。

    sessionStorage比localStorage更严苛一点,除了满足同源条件外,还要求在同一窗口(也就是浏览器的同一标签页)下。

    cookie当客户端与服务器端都做了相应的设置后(CORS跨域原理),可支持跨域访问。

    展开全文
  • 前端本地存储

    2021-09-24 22:06:48
    它是浏览器存储数据的一种方式,一般会自动随着请求发送到服务器; 有的网站会利用Cookie跟踪统计用户的习惯,比如:访问时间,访问哪些页面,页面停留时间等; Cookie是公开透明的,不要用Cookie存储密码等敏感信息...

    Cookie

    Cookie介绍

    Cookie全程 HTTP Cookie ,简称 Cookie。它是浏览器存储数据的一种方式,一般会自动随着请求发送到服务器;

    有的网站会利用Cookie跟踪统计用户的习惯,比如:访问时间,访问哪些页面,页面停留时间等;

    Cookie是公开透明的,不要用Cookie存储密码等敏感信息

    在这里插入图片描述

    Cookie容量限制

    单个Cookie容量为4k,不同浏览器Cookie个数各不相同一般设置20个没有问题

    IE6及以下每个域名最多包含20个Cookie;
    IE7及以上每个域名最多50个Cookie;
    Firefox每个域名最多50个Cookie;
    Opera下每个域名最多30个Cookie;
    Sarafi和Chrome对每个域的Cookie数目没有严格限制。

    Cookie基本操作

    写入Cookie

    通过document.cookie设置Cookie,不支持一次设置多个Cookie,只能一个一个的设置;
    在这里插入图片描述

    在这里插入图片描述

    读取Cookie

    读取也通过document.cookie,读取全部Cookie;

    读取的是由名值对构成的字符串,每个名值对之间由;(一个分号和一个空格) 分隔;
    在这里插入图片描述

    Cookie属性

    Name(名)、Value(值)

    Name、Value是创建Cookie时必须填写的,其他属性不写为默认值;

    Name、Value如果包含非英文字符,写入需要使用encodeURIComponent()编码,读取需要使用decodeURIComponent()解码;
    在这里插入图片描述

    Expires、Max-Age(失效时间)

    未设置Expires、Max-Age的cookie为会话cookie,它存在内存中,当会话结束即关闭浏览器时清除cookie;

    设置Expires、Max-Age属性的cookie到期后会被清除;

    Expires

    expires值为Date类型,表示具体什么时间过期;
    在这里插入图片描述

    Max-Age

    max-age值为数字,表示过多少秒后失效;
    在这里插入图片描述
    如果max-age值为0 或 负数这直接清除cookie;

    Domain(域)、Path(路径)

    Domain

    Domain限制了cookie的访问范围;

    js只能读写当前域或父域的cookie,不能读写其他域的cookie;

    在这里插入图片描述

    www.aaaa.comm.aaaa.com 的父域为 .aaaa.com

    Path

    Path限制了cookie的访问范围(同一域名下);

    js只能读写当前路径或上级路径的cookie,不能读写其他路径的cookie;
    在这里插入图片描述

    Name、Domain、Path三个字段都相同时,才是同一个cookie;

    HttpOnly

    如果这个cookie设置了httponly属性,则这个cookie不能通过客户端访问;

    Secure

    Secure限定了只有使用https协议,才能将cookie发送到服务器端

    Domain、Path、Secure都满足其未过期的cookie才会随着请求发送到服务器端;

    localStorage

    localStorage介绍

    localStorage也是浏览器存储数据的一种方式,它只存在于浏览器,不会发送到服务器端;

    单个域名下localStorage总大小为5M ;

    在这里插入图片描述

    localStorage存储期限

    localStorage是持久化的本地存储,除非手动清除(通过js清除、清浏览器缓存等),否则永久有效;

    localStorage基本操作

    写入数据

    使用setItem() 方法,向localStorage中写入数据;
    在这里插入图片描述
    key相同,后面数据会对前面的数据进行覆盖;

    查询数据

    使用getItem() 方法,可以通过key查询存储在localStorage中的value值;

    在这里插入图片描述

    查询不存在的key,返回null;

    删除数据

    使用removeItem() 方法,可以通过key删除存储在localStorage中的value值;
    在这里插入图片描述
    删除不存在的key,不报错;

    清空localStorage

    使用clear() 方法,可以清空localStorage;
    在这里插入图片描述

    sessionStorage

    sessionStorage介绍

    sessionStorage也是浏览器存储数据的一种方式,它只存在于浏览器,不会发送到服务器端;

    sessionStorage与localStorage除存储期限不同外,其他用法一致;
    在这里插入图片描述

    sessionStorage存储期限

    当会话结束(比如关闭浏览器)时,sessionStorage中数据会被清空;

    sessionStorage基本操作

    同localStorage;

    cookie、localStorage、sessionStorage的区别

    • cookie会在服务器和浏览器之间传递。localStorage和sessionStorage不会发给服务器,仅在本地保存;
    • cookie存储数据小,不超过4k。localStorage和sessionStorage存储一般在5MB左右;
    • cookie可以设置有效期;localStorage是持久化的本地存储,除非手动清除否则永久有效;sessionStorage在关闭窗口或者浏览器时会被删除;
    • cookie和localStorage在同源窗口中是共享的,sessionStorage在不同的窗口中不能共享;
    展开全文
  • 前端本地存储Storage

    2021-11-04 16:29:19
    (3)setItem(key,value)储存 (4)getItem(key)获取 (5)removeItem(key)删除 (6)clear()全部清除 二丶注意 (1)setItem()需要把value转化JSON格式——存数据 localStorage.setItem(key,JSON....
  • 可以解决 localStorage/sessionStorage 大小限制的问题 完美避开 indexDB 的语法,上手比较容易 localForage.getItem 返回的是 promise 不会因为关闭浏览器就消失,需要手动清理哦 removeItem(key), clear() ...
  • 三种前端本地存储方式讲解

    千次阅读 2017-12-29 00:00:00
    其实跟localStorage差不多,也是本地存储,会话本地存储 特点: 用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种...
  • ❝ 随着Web应用程序的出现,直接在客户端存储用户信息的需求也随之出现。... 本地存储:localStorage, sessionStorage, cookies 离线缓存:application cache 前端数据库:indexedDB, webSQL ..
  • 存法1:cookie_js ...存储:cookie.set('key','value') cookie.set({key1:'value1',key2:'calue2'}) 获取:cookie.get('key') cookie.get(['key1','key2']) 清除:cookie.remove('key') cookie.rem...
  • 本地储存插件主要是对localStorage进行了一下简单的封装,免去储存字典对象的时候的json转换; 适合模块化的前端开发;建议单独作为一个文件进行保存。 class Momery { Local = null; constructor() { this.Local = ...
  • 为什么会有本地存储? 网络早期最大的问题之一是如何管理状态。简而言之,服务器无法知道两个请求是否来自同一个浏览器。当时最简单的方法是在请求时,在页面中插入一些参数,并在下一个请求中传回参数。这需要...
  • 存储在用户本地,而不是存储在服务器上; 可以随着浏览器每次请求发送到服务器端。 1.1 Cookie的用法 1.1.1 写入 Cookie document.cookie = 'username=zs'; document.cookie = 'age=18'; cookie的名称或值如果包含...
  • 前端本地存储localStorage及应用

    千次阅读 2019-02-17 15:29:37
    前端本地存储localStorage及应用 localStorage是HTML5定义的一种本地存储方式,其特点是可以长期存储在用户本地磁盘且容量较大, w3c标准 建议的代理端容量是 5MB,前端可以将一些Server不需要的数据保存在...
  • 本地存储:把信息存储在客户端本地 谷歌控制台 Application中都可看到 cookie H5中 WebStorage:localStorage/sessionStorage 本地数据库存储:IndexDB 本地缓存存储:manifest ... 服务器存储:把数据存储在服务器端...
  • 存储量 一般5M左右,不同浏览器会有一点差别 安全性 不会放进请求头,可以节省大量的带宽,缩短请求时间,更加安全 生命周期 永久,需用户手动清除 语法 (API) localStorage.setItem(k,v) //设置 localStorage....
  • 前端本地存储方式

    2018-12-12 17:02:36
    参考:...amp;utm_medium=referral 1、Web Storage:仅存储于客户端 html5中的Web Storage包括两种存储方式:sessionStorage和localStorage Storage;类型只能存储字符串,非字符串的数据在存储...
  • JS前端本地存储信息 localStorage

    千次阅读 2019-01-17 21:17:19
    什么是localstorage ...localstorage存储对象分为两种: ① sessionStorage : session即会话的意思,在这里的session是指用户浏览某个网站时,从进入网站到关闭网站这个时间段,session对象的有效期...
  • 3.以键值对的形式存储 用法: 存储数据 sessionStorage.setItem(key, val) 获取数据 sessionStorage.getItem(key) 删除数据 sessionStorage.removeItem(key) 清楚所有数据 sessionStorage.clear()//会清除页面...
  • session: 数据存放在服务器上;访问增多占用服务性能;安全。 cookie: 数据存放在客户的浏览器上;单个cookie的存放不能超过4K,一个站点20个cookie;不安全。... 生命周期永久,同一浏览器,标签页全部共享,...
  • (给前端开发博客加星标,提升前端技能)转自:掘金 - 星尘starxhttps://juejin.cn/post/6925311938419408904引言2021 年,如果你的前端应用,...
  • 前端中的本地存储

    2021-12-28 11:29:26
    三种本地存储的共同点就是都可以存储数据,并且都是跟着域名走。 不同的是: 大小:local Storage和session Storage的大小为5M; cookie的大小为4K。 local Storage 为永久存储; sessionStorage 会关闭当前...
  • 前端本地存储的存取

    2020-07-11 11:17:51
    本地存储 存 localStorage.setItem('userMsg',JSON.stringify(res.data.data)) 取 var pub_key = JSON.parse(localStorage.getItem('userMsg'));
  • H5 的本地存储: localstorage 和 sessionstorage cookie: http 无状态 不持久 前端和后端进行数据交互的时候, 是用 http 请求, 但是 http 是一种无状态的协议, 无状态的意思就是收到一个请求, 返回一个相应, 而不...
  • 在HTML5之前浏览器存储数据一般只能存储在Cookie中,但是Cookie的限制是4096字节,这就要求网站存储的数据尽量精简,复杂的...为了在本地存储大量数据,HTML5提出了新的本地存储技术sessionStorage和localStorage。 ...
  • 需求:点击列表对应的信息,跳转到详情页展示对应id的单个详情 列表页: 点击列表页的单个信息跳转到对应id的详情页 获取点击相对应的id,存储 详情页: 接收传过来的id,并请求渲染出来; ...
  • 前端缓存与本地存储

    2021-02-23 21:30:49
    前端缓存也就是HTTP缓存机制是前端性能优化很重要的一点,而前端本地存储和缓存却是不一样的,但对于新手的确有弄混淆的可能。本文详细记录它们的概念与特点 二、HTTP缓存 HTTP缓存,可以从缓存位置,获取缓存方式...
  • 前端本地储存机制

    2019-06-09 21:22:10
    前端本地储存机制 假设你有一个网站,你想要他登录一次后,七天内就实现免登录,也就是说这个时候你需要在七天之内记住他的登录状态,这时你该怎么办? 解决方法很多,下面是三种前端本地储存的方法 Cookie存储 ⇒ ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 132,340
精华内容 52,936
关键字:

前端本地存储