码迷,mamicode.com
首页 > Web开发 > 详细

localstorage - HTML 5 Web 本地存储总结

时间:2020-08-13 12:08:51      阅读:61      评论:0      收藏:0      [点我收藏+]

标签:ora   copy   set   方法   隐私   类型   本质   cookie   code   

001、localStorage概念

在html5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储,解决了cookie存储空间不足的问题(cookie中每条cookie存储空间为4K),localStorage支持5M大小。

 

002、localStorage的局限

技术图片

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

 
2、localStorgae的值类型限定为String类型,我们需要JSON.parse() JSON.Stringify()进行转换


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


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


5、localStorage不能被爬虫抓取到
技术图片

 

003、localStorage的设置

技术图片
localStorage.name = "凡尘";

localStorage["name"] = "凡尘";

localStorage.setItem("name","凡尘")
技术图片

 

004、localStorage的读取

技术图片
var nameval = localStorage.name;
console.log(nameval);

var nameval = localStorage["name"];
console.log(nameval);

var nameval = localStorage.getItem("name")
技术图片

005、localStorage的获取

技术图片
使用key()方法,向其中输入索引即可获取对应的键值

localStorage.a = "1";

localStorage["b"] = "2";

localStorage.setItem("c","3");

for(var i=0;i<localStorage.length;i++){
  var key = localStorage.key(i);
  console.log(key)
}
技术图片

 

006、localStorage的删除

技术图片
删除所有:
  localStorage.clear();

删除某一个值
  localStorage.removeItem(key)

 

 

localstorage - HTML 5 Web 本地存储总结

标签:ora   copy   set   方法   隐私   类型   本质   cookie   code   

原文地址:https://www.cnblogs.com/liuhaov/p/13492581.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!