客户端(浏览器端)数据存储技术概览

console.log(typeof localStorage.getItem('test3')) //"string"

console.log(localStorage.getItem('test3')) //"[object object]"

//为避免存取数据不一致的情况，存储复合数据类型时进行序列化，攫取时进行反序列化

localStorage.setItem('test4', JSON.stringify({a:1,b:2}));

console.log(typeof localStorage.getItem('test4')) //"string"

console.log(JSON.parse(localStorage.getItem('test4'))) //{a:1,b:2}

// Create 
 
const user = { name: 'Ire Aderinokun', age: 25 }   
 
localStorage.setItem('user', JSON.stringify(user)); 
 
  
 
// Read (Single) 
 
console.log( JSON.parse(localStorage.getItem('user')) ) 
 
  
 
// Update 
 
const updatedUser = { name: 'Ire Aderinokun', age: 24 }   
 
localStorage.setItem('user', JSON.stringify(updatedUser)); 
 
  
 
// Delete 
 
localStorage.removeItem('user');

Local Storage 的长处

比拟于Cookies：

其供给了更直不雅地接口来存储数据
更安然
能存储更多半据

Local Storage 的缺点

只能存储字符串数据(直接存储复合数据类型如数组/对象等，都邑转化成字符串，会存在存取数据不一致的情况)：

浏览器支撑

IE8+/Edge/Firefox 2+/Chrome/Safari 4+/Opera 11.5+(caniuse)

Session Storage

Session Storage 是 Web Storage API 的另一种类型。和 Local Storage 异常类似，差别是 Session Storage 只存储当前会话页(tab页)的数据，一旦用户封闭当前页或者浏览器，数据就主动被清除掉落了。

Session Storage 的根本CRUD 操作

经由过程下面的语法，我们可以创建，攫取，更新和删除 Session Storage:

// Create 
 
const user = { name: 'Ire Aderinokun', age: 25 }   
 
sessionStorage.setItem('user', JSON.stringify(user)); 
 
  
 
// Read (Single) 	
			 2/5   首页 上一页 1 2 3 4 5 下一页 尾页	
			

　　推荐阅读
　　军队创建干部健康体检信息管理新平台
            
            自本年4月起，全军各医疗机构将同一应用新版“部队干部健康体检信息治理体系”实施体检信息治理。记者获悉，该体检舷?容身部队医疗机构实际，为干部健康体检工作量身订制，是全>>>详细阅读


本文标题：客户端(浏览器端)数据存储技术概览
地址：http://www.17bianji.com/lsqh/34619.html
 1/2    1