说说cookies和localstorage等前端存储

说到cookies，我的第一反应是它的存储容量虽然小，但绝对不可能被localstorage、sessionstorage等其他存储替代，因为它的特点：会在请求的时候将数据发送到服务器，所以一般情况下，cookie要小，不要存储敏感信息，因为如果请求被劫持，cookie信息就会被泄露了，所以尽量控制cookie的寿命，这样cookie就不会永远有效。可以设置域名domain，将父域名下的cookies共享给多个子域名。通过expires设置cookie过期时间。cookie的最大存储容量约为4096字节，每个域最多只能有20个cookie。cookie长度不能超过4KB，否则会被截断。考虑到cookie的安全性，将cookie字段标记为HttpOnly，这样客户端js就无法读写标记的cookie字段。如果cookie设置了超时时间，则cookie过期时也会过期。如果没有设置，那么cookie就是session级别的。cookie的session是指如果浏览器没有关闭，所有的tab级页面或者新打开或刷新的都属于一个session。cookie的session的意思是浏览器在设备退出时结束。接下来提到的sessionStorage、localStorage等都是存储在客户端的。服务器端没有办法直接获取到sessionStorage的访问限制。只能在当前设置sessionStorage的域下访问，两个不同的tab之间不能互通的sessionStorage刷新tab标签后才能访问。当前标签关闭后，将无法再获取。因此，如果用户不清理localStorage，它将被永久存储。localStorage的最大存储容量为5MwebSql。维护了，但是兼容性很好websql更像一个关系型数据库，使用sql语句来操作><脚本>vardb=window.openDatabase('testDB','1.0','TestDb',2*1024*1024);db.transaction(function(context){context.executeSql('如果不存在就创建表cubefe(id,name)');context.executeSql('INSERTINTOcubefe(id,name)VALUES(1,"doctorhou")');});indexeddb更像nosql，可以直接使用js方法操作数据<身体><脚本>varstartTime=+newDate();console.log('开始时间：',startTime);functionopenDB(dbname,version,cb){varrequest=window.indexedDB.open(dbname);request.onsuccess=function(e){vardb=e.target.result;myDB.db=db;varversion=db.version;如果(!db.objectStoreNames.contains('students')){request=db.createObjectStore('students',{autoIncrement:true});}cb&&cb(e);};}varmyDB={name:'test',version:4,db:null};openDB(myDB.name,myDB.version,function(e){vardb=e.target.result;varstoreName='students';vartransaction=db.transaction(storeName,'读写');varstore=transaction.objectStore(storeName);store.put({id:2,name:'doctorhou'},'b');varrequest=store.get(1);request.onsuccess=function(e){console.log(request.result);varendTime=+newDate();console.log('take-time:',endTime-startTime);};});和localstorage一样，indexeddb和websql只能在创建的数据库的域名下访问，不能指定访问域名。存储时间也是永久的，除非用户清除数据，否则可以作为长期存储indexeddb和websql没有大小限制，但是当indexeddb数据库超过50M时，浏览器会弹出一个确认，当我们在做离线应用，或者webapp的时候，可以考虑使用本地数据库访问数据。最后总结一下cookie、localstorage、sessionStorage和localStorage.key的区别。：存放一些同步访问页面时必须带给服务器的信息。sessionStorage：建议存储一些当前页面刷新时需要存储的信息，标签关闭时不需要留下的信息。存储一些状态，可以减轻服务器的压力，也可以存储用户数据indexDB和websql：建议如果有一些数据，服务器承受不了压力，但是如果需要和用户信息绑定，可以使用localStorage存储一些状态，这样可以减轻服务器的压力，也可以存储用户的数据。