前端存储主要有哪些方式，有什么区别（sessionStorage,localStorage,cookie） |
您所在的位置：网站首页 › ns打开浏览器的方法有哪些呢图片 › 前端存储主要有哪些方式，有什么区别（sessionStorage,localStorage,cookie） |
前端存储主要有哪些方式，有什么区别（sessionStorage,localStorage,cookie）
|
前端在处理页面数据的时候有时候会存放一些数据在浏览器当中，一般存储在浏览器当中的缓存数据安全性比较低。 主要的存储方式如下图： 1.存储时间是永久存储。 2.大小在5M左右。 3.ie低版本或者一些使用无痕浏览器都是不支持的 4.存储的是字符串，内容过多时，会消耗内存空间，让页面变卡 5.本地存储，不会和服务器有交互 代码： // 使用方法存储数据 localStorage.setItem("name", "Srtian") // 使用属性存储数据 localStorage.say = "Hello world" // 使用方法读取数据 const name = localStorage.getItem("name") // 使用属性读取数据 const say = localStorage.say // 删除数据 localStorage.removeItem("name") 2.sessionStorage 大致跟localStorage一样 区别：不是永久存储，一旦浏览器的窗口关闭，也随之清除 // 使用方法存储数据 sessionStorage.setItem("ifClick", "true"); // 使用属性存储数据 sessionStorage.ifClick = "true"; 3.cookie优点： 1.存储时间可以根据存储得规则无限期得存储。 2.Cookie的兼容性非常的好。 缺点： 1.大小被限制：一般每个域只能存储20个左右，每个cookie大小在4k左右， 2.cookie要往返与客户端和服务端，会浪费不必要的资源 代码： function setCookie(cname, cvalue, exdays) { var d = new Date(); d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000)); var expires = "expires=" + d.toUTCString(); document.cookie = cname + "=" + cvalue + "; " + expires+"; path=/" //这个很重要代表在那个层级下可以访问cookie console.log(d) } //获取cookie function getCookie(cname) { var name = cname + "="; var ca = document.cookie.split(';'); for(var i = 0; i |
【本文地址】
今日新闻 |
推荐新闻 |