在前端开发中,尽量少用cookie,原因:
1.cookie限制大小,约4k左右,不适合存储业务数据,尤其是数据量较大的值
2.cookie会每次随http请求一起发送,浪费宽带
在移动开发中尽量用localstroage,优点:
1.存储数据量大,localStorage拓展了cookie的4K限制
2.会随http请求一起发送,localStorage会可以将第一次请求的数据直接存储到本地,这个相当于一个5M大小的针对于前端页面的数据库,相比于cookie可以节约带宽,但是这个却是只有在高版本的浏览器中才支持的
缺点:
1.在浏览器的隐私模式下不能读取
2.本质是在读写文件,写入数据量大的话会卡(FF是将localstorage写入内存中的)
3.不能被爬虫读取
4.localStorage是公共资源,如果你的产品域名下有很多应用共享这份资源会有风险
localStorage与sessionStroage区别:
1.localStroage是将信息存储在硬件设备中的,关闭浏览器或网页也不会消失;
2.sessionStroage的有效期只是网页在浏览器打开到关闭的时间段
安全性的考虑:
需要注意的是,不是什么数据都适合放在 Cookie、localStorage 和 sessionStorage 中的。使用它们的时候,需要时刻注意是否有代码存在 XSS 注入的风险。因为只要打开控制台,你就随意修改它们的值,也就是说如果你的网站中有 XSS 的风险,它们就能对你的 localStorage 肆意妄为。所以千万不要用它们存储你系统中的敏感数据。
// 方法1
window.localStorage.name1 = 'code1';
// 方法2
window.localStorage["name2"] = "code2";
// 方法3
window.localStorage.setItem("name3", "code3");
// 方法1
window.localStorage.name1; // code1
// 方法2
window.localStorage["name2"]; // code2
// 方法3
window.localStorage.getItem("name3"); // code3
// 将localStorage的所有内容清除
window.localStorage.clear();;
// 将localStorage中的某个键值对删除
storage.removeItem("name");
一般我们会将JSON存入localStorage中,但是在localStorage会自动将localStorage转换成为字符串形式,这个时候我们可以使用JSON.stringify()这个方法,来将JSON转换成为JSON字符串
{
if (!window.localStorage) {
alert("浏览器支持localstorage");
} else {
var storage = window.localStorage;
var data = {
name: 'code.net.cn',
sex: 'man',
hobby: 'program'
};
var d = JSON.stringify(data);
storage.setItem("data", d);
console.log(storage.data);
}
}
读取之后要将JSON字符串转换成为JSON对象,使用JSON.parse()方法
{
var storage = window.localStorage;
var data = {
name: 'code.net.cn',
sex: 'man',
hobby: 'program'
};
var d = JSON.stringify(data);
storage.setItem("data", d);
//将JSON字符串转换成为JSON对象输出
var json = storage.getItem("data");
var jsonObj = JSON.parse(json);
console.log(typeof jsonObj);
}
let name = "code.net.cn"
// 方法1
window.sessionStorage.setItem('name3', name);
//方法2
window.sessionStorage['name3'] = name;
// 方法1
window.sessionStorage.getItem('name');
// 方法2
window.sessionStorage["name"]
{
let userEntity = {
name: 'code.net.cn',
skill: 'web'
};
// 存储值:将对象转换为Json字符串
sessionStorage.setItem('user', JSON.stringify(userEntity));
// 取值时:把获取到的Json字符串转换回对象
let userJsonStr = sessionStorage.getItem('user');
userEntity = JSON.parse(userJsonStr);
console.log(userEntity.name); // => 'code.net.cn'
}
Vue plugin for work with local storage, session storage and memory storage from Vue context
Vue插件用于从Vue上下文中处理本地存储、会话存储和内存存储。
vue-ls官网
// npm 安装
npm install vue-ls --save
// yarn 安装
yarn add vue-ls
import Storage from 'vue-ls';
options = {
namespace: 'vuejs__', // key prefix
name: 'ls', // name variable Vue.[ls] or this.[$ls],
storage: 'local', // storage name session, local, memory
};
Vue.use(Storage, options);
//or
//Vue.use(Storage);
new Vue({
el: '#app',
mounted: function () {
Vue.ls.set('foo', 'boo');
//Set expire for item
Vue.ls.set('foo', 'boo', 60 * 60 * 1000); //expiry 1 hour
Vue.ls.get('foo');
Vue.ls.get('boo', 10); //if not set boo returned default 10
let callback = (val, oldVal, uri) => {
console.log('localStorage change', val);
}
Vue.ls.on('foo', callback) //watch change foo key and triggered callback
Vue.ls.off('foo', callback) //unwatch
Vue.ls.remove('foo');
}
});