localStorage的日常使用
2018-08-30 本文已影响0人
asimpleday
什么是localStorage
在html5中，新加入了一个localStorage特性，这个特性主要用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。
localStorage的优势与局限
优势
- localStorage扩展了cookie的4k限制
- localStorage会将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对前端页面的数据库，相比于cookie可以节约宽带
局限
- IE9以下不支持
- 目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在我们对日常比较常见的JSON对象类型需要一些转换
- localStorage在浏览器的隐私模式下是不可读取的
- localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
- localStorage不能被爬虫抓取到
- localStorage属于永久性存储，会话关闭，键值对不会被清空
具体的使用
判断浏览器是否支持localStorage
if( window.localStorage ){
alert( '您的浏览器支持localStorage' );
}else{
alert( '您的不浏览器支持localStorage' );
}
localStorage的写入
var storage = window.localStorage;
storage.a = 111; // 方式一
storage['b'] = 222; // 方式二
storage.setItem( 'c', 333 ); // 方式三 推荐使用
console.log( storage ); // {a: "111", b: "222", c: "333"}
可以在浏览器中的检查模式Application菜单中的的Storage的localStorage中查看
image.png
localStorage的获取
console.log( storage.a ); // 111 方式一
console.log( storage['b'] ); // 222 方式二
console.log( storage.getItem( 'c' ) ); // 333 方式三，推荐使用
这里获取到的值类型都是string类型，尽管我们存进去的是number类型
console.log( typeof storage.a ); // string
console.log( typeof storage['b'] ); // string
console.log( typeof storage.getItem( 'c' ) ); // string
localStorage的更改
storage.setItem( 'a', 111 ); // 写入一个a字段，值为 111
storage.setItem( 'a', 222 ); // 更改字段a的值
console.log( storage.getItem( 'a' ) ); // 222
localStorage的删除
- 删除localStorage中的某个键值对
storage.setItem( 'a', 111 );
storage.setItem( 'b', 222 );
storage.setItem( 'c', 333 );
storage.removeItem( 'c' ) // 删除字段c
console.log( storage ); // {a: "111", b: "222"}
- 将localStorage所有的记录删除
storage.setItem( 'a', 111 );
storage.setItem( 'b', 222 );
storage.setItem( 'c', 333 );
console.log( storage.length ); // 3
storage.clear(); // 删除所有内容
console.log( storage.length ); // 0
localStorage的键获取
storage.setItem( 'a', 111 );
storage.setItem( 'b', 222 );
storage.setItem( 'c', 333 );
console.log( storage.key( 0 ) ); // a
console.log( storage.key( 1 ) ); // b
console.log( storage.key( 2 ) ); // c
localStorage的注意事项
一般的情况，我们会将json存入localStorage中，但是我们获取到之后的值却是字符串类型，我们可以使用JSON.stringify()这个方法，来将json对象转化为json字符串，进行存储。
storage.clear();
var user = {
userName: 'tom',
age: 24,
likes: 'sing'
}
storage.setItem( 'user', JSON.stringify( user ) );
读取的时候要将json字符串转化为json对象，使用JSON.parse()方法
var obj = JSON.parse( storage.getItem( 'user' ) );
for( var key in obj ){
console.log( key + '---' + obj[key] ); // userName---tom age---24 likes---sing
}
