localstorage的使用

什么是localstorage

localStorage是HTML5中新增的一个本地存储方式,HTML5之前主要是使用cookies存储,但是cookie存储内容只能在4k之内,在不同的浏览器中localStorage会有所不同,不过存储上线一般是5M。

(HTML5中还有一个sessionStorage,与localstorage的区别是,当会话结束sessionStorage的键值对就会被清空,而localstorage是没有时间限制的数据存储)

localstorage优缺点

优点:

1、localStorage突破cookie的4K限制,拥有更大的本地存储空间

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

缺点:

1、在浏览器上存储空间的不统一,并且IE浏览器需要在IE8以上才支持

2、目前所有浏览器把localstorage值限制为string类型,对比日常的json需要一些转换

3、在浏览器隐私模式下localstorage不可读取

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

localstorage的使用

//存储
localStorage.name="博客园"
localStorage.age=10
//查找 
console.log(localStorage.name) //log出 博客园

//注意:localStorage本质上是对字符串的读取
console.log(typeof(localStorage.age))  //存储进去的是数字,但是log出的是string

//删除
localStorage.removeItem("name")  
console.log(localStorage.name)  //log出 undefined

 

localstorage存储json

//存储的JSON要先转化为字符串
var jsonStr = JSON.stringify({"name": "博客园", "age": "10"})

//存储
localStorage.json = jsonStr

//将查到到的json字符串转化为JSON对象

var json = JSON.parse(localStorage.json)

console.log(json.name)        //log出  博客园

 

posted @ 2019-03-30 17:31  小小庞  阅读(1395)  评论(0编辑  收藏  举报