localStorage和sessionStorage

H5新特性之一:本地存储lacalStorage

优点:

　　1.解决了cookie本地存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage一般浏览器支持的是5m,视浏览器而定

　　2. localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽

缺点:

　　1.不同浏览器大小不统一,并且在IE8以上的IE版本才支持localStorage这个属性

　　2.所有的浏览器中都会把localStorage的值类型限定为string类型，对JSON对象类型需要一些转换

　　3.localStorage在浏览器的隐私模式下面是不可读取的

　　4.localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡

　　5.localStorage不能被爬虫抓取到

区别:localStorage属于永久性存储;sessionStorage当会话结束的时候，其中的键值对会被清空

用法:

　　1.清空:

localStorage.clear() // undefined
localStorage //Storage {length: 0}

　　2.存储:

localStorage.setItem("name","caibin") //存储名字为name值为caibin的变量
localStorage.name = "caibin"; // 等价于上面的命令
localStorage // Storage{name: "caibin", length: 1} 读取数据

　　3.读取:

localStorage.getItem("name") //caibin,读取保存在localStorage对象里名为name的变量的值
localStorage.name // "caibin"
localStorage.valueOf() //读取存储在localStorage上的所有数据
localStorage.key(0) // 读取第一条数据的变量名(键值)
//遍历并输出localStorage里存储的名字和值
for(var i=0; i<localStorage.length;i++){console.log('localStorage里存储的第'+i+'条数据的名字为：'+localStorage.key(i)+',值为：'+localStorage.getItem(localStorage.key(i)));
}

　　4.删除某个变量:

localStorage.removeItem("name"); //undefined
localStorage // Storage {length: 0} 之前保存的name变量从localStorage里删除了

　　5.检查localStorage里是否保存某个变量:

localStorage.hasOwnProperty('name') // true
localStorage.hasOwnProperty('sex') // false

　　6.将数组转为本地字符串:

var arr = ['aa','bb','cc']; // ["aa","bb","cc"]
localStorage.arr = arr //["aa","bb","cc"]
localStorage.arr.toLocaleString(); // "aa,bb,cc"

　　7.将JSON存储到localStorage里:

var students = {xiaomin: {name: "xiaoming",grade: 1},teemo: {name: "teemo",grade: 3}
}students = JSON.stringify(students); //将JSON转为字符串存到变量里
console.log(students);
localStorage.setItem("students",students);//将变量存到localStorage里var newStudents = localStorage.getItem("students");
newStudents = JSON.parse(students); //转为JSON
console.log(newStudents); // 打印出原先对象

转载于:https://www.cnblogs.com/wccc/p/9889776.html

localStorage和sessionStorage相关推荐

2.javascript之缓存 localStorage 和sessionStorage之间的区别
2018-08-04 前言今天做项目的时候遇到了这个问题,用户登录成功之后如何改变将登录的链接切换为用户名解决方案:使用了sessionstorage缓存和js的onload加载事件用户登录成 ...
localStorage、sessionStorage、Cookie的区别及用法
localStorage html5新增的一个本地存储API,所谓localStorage就是一个小仓库的意思,它有5M的大小空间,存储在浏览器中. localStorage生命周期是永久,这意味着除 ...
H5存储------localStorage和sessionStorage
web现在随着计算机的高速发展,客户端干的事情越来越多了,随着事情的增多,很多东西存储就不止在服务器了,本地存储越来越强大了(大神原谅我废话了????) 早期时期 cookie存储 (之前我用着还是很 ...
详说 Cookie, LocalStorage 与 SessionStorage
本文最初发布于我的个人博客:咀嚼之味最近在找暑期实习,其中百度.网易游戏.阿里的面试都问到一些关于HTML5的东西,问题大多是这样开头的:"你用过什么HTML5的技术呀?" 而后 ...
Cookie, LocalStorage 与 SessionStorage异同
不同 cookie由服务端生成,用于标识用户身份:而两个storage用于浏览器端缓存数据一般情况下浏览器端不会修改 cookie,但会频繁操作两个storage cookie有path概念,子路径 ...
localStorage与sessionStorage的区别
在之前的面试当中经常会被问到localStorage与sessionStorage的区别.通常我的回答都比较简单和我对它的理解一样:localStorage是永久存储,除非手动清除,否则会一直保存在浏 ...
关于localStorage和sessionStorage存储用法的一些细节说明----------localStorage和sessionStorage存储必须字符串化...
localStorage 和 sessionStorage 基本用法基本一致:localStorage需要会长时间保存,而sessionStorage会保存在当前对话框,会随着创库的关闭而被清除, 存 ...
Web数据存储之localStorage和sessionStorage
Web数据存储之localStorage和sessionStorage 学习前端以来,自己了解有localStorage和sessionStorage的相关存储的知识,也有实践过,但是之前只限于能用的 ...
Vue项目代码改进（三）—— Cookie、LocalStorage和SessionStorage的使用
存在问题: 如果在退出页面时,没有点击"退出"按钮,而是直接关闭页面,token并没有被清除,依然能通过访问http://localhost:8080/#/ 直接进入主页. 原因: ...
cookie html5,HTML5——存储（cookie、localStorage、sessionStorage）的区别
cookie 本来用于客户端和服务端通信, 但是因为它有本地存储的功能,于是被"借用"了. 使用方法 document.cookie 获取和修改即可缺点存储量太少,只有4kb ...

localStorage和sessionStorage

localStorage和sessionStorage相关推荐

最新文章

热门文章