标签：存储 预览 sessionStorage 网络 H5 localStorage key cookie

前言：

document.cookie存储，内存只有4k左右,操作繁琐，给开发者带来不便 为了满足要求，h5规范提出了Web Storage

localStorage、sessionStorage和cookie 浏览器将数据存储在本地有三种方式：localStorage、sessionStorage和cookie。

特点

cookie:

1.设置的cookie过期时间，一值有效。 2.存储位置，服务器和预览器

localStorage:

1.存储数据长久，预览器关闭后数据不丢失，除非主动删除数据。 2.存储位置预览器

sessionStorage:

1.临时会话，预览器关闭，就自动删除。 2.存储位置，预览器

使用场景：

localStorage 对象存储的数据没有时间限制，用于长久保存整个网站的数据。

sessionstorage常用于敏感账号一次性登陆，如关闭当前页面再次打开页面就要重新登陆

cookie是自动随该域下的请求带在request header的cookie字段里，而无需额外的JS操作，在做通用的登录认证系统有着优势

Storage接口的方法和属性

setItem(key,value) 存储方式 getItem(key) 获取存储值 romoveItem(key) 指定键名，从存储中删除 clear() 清除当下所有的Sotrage内容 key(n) 返回第n个，key的名称 length 返回Sotrage对象item的数目

实例：

sessionStorage例子：

sessionStorage.setItem("小王","180岁") //存储到sessionStorage sessionStorage.clear() //清除了sessionStorage所有的内容

localStorage例子：

localStorage.setItem("小明","性别女") //存储到localStorage localStorage.clear() //清除了localStorage所有的内容

cookie例子:

存储方式 document.cookie = "小红=性别男"; 保质期 twoDay=22460*60; document.cookie=${key}=${value};max-age=${twoDay}

标签：存储,预览,sessionStorage,网络,H5,localStorage,key,cookie
来源： https://blog.csdn.net/qq_53701739/article/details/123240063

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。