Web/前端存储简述

Web/前端存储

Web/前端存储分为cookie和WebStorage：

1.cookie存储

特点：产生于服务器端，保存在客户端，同一服务器下保存的cookie数据共享，不同服务器的不共享，传输数据最大为4kb。
也可以通过js来产生cookie，通常通过js-cookie（ <script src="https://cdn.bootcdn.net/ajax/libs/js-cookie/3.0.1/js.cookie.min.js"></script>）这个库来操作cookie

<script>
//创建cookie 参数：key（名）value（值）设置存在时间
Cookies.set("name","zhangsan",{ expires: 7 }) //创建一个存在七天，名字为name，内容为zhangsan的cookie
//获取cookie 参数：key
console.log(Cookies.get('name'));
//移除cookie  参数：key
Cookies.remove('name')
</script>

2.WebStorage存储

WebStorage存储分为sessionStorage（会话存储）和localStorage（本地存储）；

2.1 sessionStorage存储

特点：针对于选项卡，选项卡关闭或者浏览器关闭，会话失效，传输数据5M。
页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。
打开多个相同的URL的Tabs页面，会创建各自的sessionStorage。
关闭对应浏览器tab，会清除对应的sessionStorage。

<script>
var str = "zhangsan";// 设置会话存储 参数：key valuesessionStorage.setItem("name", "zhangsan");sessionStorage.setItem("weight", "100kg");// 获取会话存储 参数：keyconsole.log(sessionStorage.getItem("name"));//打印key为name的值console.log(sessionStorage.getItem("weight"));console.log(sessionStorage.getItem("str"));// 清除会话存储 参数：keysessionStorage.removeItem("str");//清除全部会话存储 无参数sessionStorage.clear();
</script>

2.2 localStorage（本地存储）

特点：将数据存储到本地磁盘，即使选项卡和浏览器关闭就存在除非手动删除，否则数据一直存在磁盘中，传输的数据5M甚至更大

<script>// 设置内容 参数：key valuelocalStorage.setItem('name','larry');// 获取内容 参数：key console.log(localStorage.getItem('name'));// 清空key的内容localStorage.removeItem('name');// 清空全部内容localStorage.clear();</script>

Web/前端存储简述相关推荐

好程序员web培训简述web前端开发工具有哪些
好程序员web培训简述web前端开发工具有哪些,随着互联网技术的发展,用户对于web网页的依赖性越来越重,这对于web前端开发工程师的要求也在不断提高.作为开发者来说,开发工作需要依赖很多开发工具的协 ...
小猿圈web前端简述canvas如何实现二维码和图片合成
你经常看到活动海报什么的,上都是有各种宣传文案以及二维码形成的,你知道怎么用canvas实现二维码和图片合成,下面小猿圈Linux讲师为你详细介绍一下canvas如何实现二维码和图片合成的. 使用ur ...
WEB前端基础知识汇总
javascript: JavaScript中如何检测一个变量是一个String类型?请写出函数实现 typeof(obj) === "string" typeof obj === ...
ajax 更新模型数据_DuangDuangDuang，重点来啦！高薪全靠它——百战Web前端课程更新03.11...
百战程序员九大专业运营,周周有课程更新,保持行业领先.本次更新课程Web前端第三十阶段经典面试题解析章节1-5及课程资料.本次更新可谓是诚意满满,针对市场面试需要,总结经典面试题集,为你揭开企业技术要 ...
Web前端开发——BAT面试题汇总及答案01
目录: 目录: HTML&CSS篇: 1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? 2.每个 HTML 文件里开头都有个很重要的东西,Doctype,知道这是干什么的吗? 3 ...
零基础开始学 Web 前端开发，有什么建议？（视频教程）
WEB前端看似简单,其实不然,要学的知识点很多很杂,对于零基础学习前端的小伙伴来说,一份详细的前端学习知识点大纲尤为重要. 下面,话不多说,直接上干货(全网最全,没有之一). PS:文末有惊喜(全阶段 ...
2018最新Web前端经典面试试题及答案
本篇收录了一些面试中经常会遇到的经典面试题以及自己面试过程中遇到的一些问题,并且都给出了我在网上收集的答案.马上就要过春节了,开年就是崭新的一年,相信很多的前端开发者会有一些跳槽的悸动,通过对本篇知识 ...
web前端面试总结(自认为还算全面哈哈哈哈哈！！！！）
web前端面试总结(自认为还算全面哈哈哈哈哈!!!!) 一.CSS问题 1.flex布局 display:flex; 在父元素设置,子元素受弹性盒影响,默认排成一行,如果超出一行,按比例压缩 flex ...
2018最新Web前端经典面试题与答案
一个前端vue的项目:基于vue2.0 +vuex+ element-ui后台管理系统 - [效果演示地址][github地址] javascript: JavaScript中如何检测一个变量是一个S ...