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出  博客园