JS本地保存数据的几种方法

Posted 2020-10-14 灬晓风

1.Cookie 
这个恐怕是最常见也是用得最多的技术了，也是比较古老的技术了。COOKIE优点很多，使用起来很方便 
但它的缺点也很多： 
比如跨域访问问题；无法保存太大的数据（最大仅为4KB）；本地保存的数据会发送给服务器，浪费带宽 等等；

2.使用sessionStorage、localStorage 
localStorage： 
是一种你不主动清除它，它会一直将存储数据存储在客户端的存储方式，即使你关闭了客户端（浏览器)，属于本地持久层储存 

sessionStorage： 
用于本地存储一个会话（session）中的数据，一旦会话关闭，那么数据会消失，比如刷新。 
有时候，我们需要将数据存储到sessionStorage和localStorage中，这样做的好处有： 
1 缓存数据 
2 减少对内存的占用 
但是，storage只能存储字符串的数据，对于JS中常用的数组或对象却不能直接存储。 
它能保存更大的数据（IE8上是10MB，Chrome是5MB），同时保存的数据不会再发送给服务器，避免带宽浪费。

localStorage存储方法（sessionStorage类似） 
localStorage.name =’vanida； 
localStorage[“name”]=’vanida’； 
localStorage.setItem(“name”,”vanida”); 
//这三种设置值方式是一样的； 
localStorage获取值方法 
var name = localStorage[“name”] 
var name= localStorage.name 
var name＝ localStorage.getItem(“name”); 
//这三种获取值方式是一样的； 
localStorage清除特定值方法 
//清除name的值 
localStorage.removeItem(“name”); 
localStorage.name＝”; 
localStorage清除所有值方法 
localStorage.clear() 
localStorage只能存储字符串，如果需要存储对象，首先要转化为字符串。利用JSON.stringify()； 
var person = {name:”vanida”,”sex”:”girl”,”age”:25}; 
localStorage.setItem(“person”,JSON.stringify(person)); 
// localStorage.person=”{“name”:”vanida”,”sex”:”girl”,”age”:25}” 
注意：JSON.stringify()中不要忘了“i”,stringify而不是stringfy！ 
然后取出person的对象你可以用JSON.parse(); 
person = JSON.parse(localStorage.getItem(“person”));