localStorage的日常使用

什么是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的删除

1. 删除localStorage中的某个键值对

storage.setItem( 'a', 111 );
storage.setItem( 'b', 222 );
storage.setItem( 'c', 333 );
storage.removeItem( 'c' )   // 删除字段c
console.log( storage );   // {a: "111", b: "222"}

2. 将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
}

来源：https://www.cnblogs.com/st-leslie/p/5617130.html