javascript之本地缓存

在客户端运行的JS是不能操作用户电脑磁盘中的文件(为了保护客户的安全) JS中的本地存储：使用JS向浏览器的某一个位置中存储一些内容，浏览器即使关闭了，存储的信息也不会销毁，当再重新打开浏览器的时候我们依然可以获取到上一次存储的信息 1、本地存储的方案：传统： 1、cookie：把信息存储到客户端的浏览器中(但是项目服务器也是可以获取的) 2、session：把信息存到服务器上的(服务器存储) HTML5：webStorage 1、localStorage：永久的存储到客户端的本地 2、sessionStorage：信息的会话存储，会话窗口存在信息也存在，会话窗口关闭信息就消失了 2、cookie localStorage sessionStorage webStorage： setItem([key],[value])：向客户端的本地存储一条记录，存储的[value]需要时字符串格式，如果编写的不是字符串，浏览器也会默认转化为字符串，然后再进行存储，同源下存储的[key]是不会重复的，如果之前有的话，是把存储的信息重新的进行修改 getItem([key])：获取之前存储的值 removeItem([key])：移除 clear()：把当前源下所有的存储记录都移除掉 localStorage.length：获取本地一共存储的数量 localStorage.key(0)：获取索引为0的这一项的值 localStorage.setItem('age', 1) //存储 localStorage.getItem('age') //获取

localStorage 和 sessionStorage 的区别：
    localStorage属于永久存储到本地，不管是刷新页面还是关掉页面或者是关掉浏览器，存储的内容都不会消失，只有我们自己手动的去删除才会消失(不管是杀毒软件还是浏览器自带的清除功能都不能把localStorage存储的内容移除掉)
    sessionStorage属于临时会话存储，只要当前的页面不关闭，信息就可以存储下来，但是页面一旦关闭，存储的信息就会自动清除(F5刷新页面只是把当前的DOM结构重新渲染，然而会话并没有关闭)

    cookie：
        document.cookie = "age=7"  //存储；
        escape && unespace 可以对中文的字符串进行编码和解码，防止存储的时候乱码
        var str = '培训';
        var n = escape(str)   // 对str进行编码
        var m = unescape (n)  // 对n进行解码
        其他编码解码的方式：encodeURI()   decodeURI()   encodeURIComponent()

cookie方法的封装：

`` var cookieRender = (function () {

//设置

function setValue(options) { var _default = { name: null, value: null, expires: new Date(new Date().getTime() + (1000 * 60 * 60 * 42)), path: '/', domain: '' }

for (var key in options) {
  if (options.hasOwnProperty(key)) {
    _default[key] = options[key];
  }
}
document.cookie = _default.name + '=' + escape(_default.value) + ";expires=" + _default.expires.toGMTString() + ";path=" + _default.path + ";domain = " + _default.domain

}

//获取

function getValue(name) { var arr = document.cookie.math(new RegExp("(^| )" + name + "=([^;]*)(;|$)")); if(arr != null) { return unescape(arr[2]); } return null }

//删除

function removeValue(options) { var _default = { name: null, path: '/', domain: '' }

for (var key in options) {
  if (options.hasOwnProperty(key)) {
    _default[key] = options[key];
    }
  }
if(getValue(_default.name)){
  document.cookie = _default.name + "=" + "; path=" + _default.path + "; domain=" + _default.domain + ";expires = 过期时间"
}

}

return { set:setValue, get:getValue, remove:removeValue } })();


cookie 和localStorage的区别：
    1、cookie兼容所有的浏览器，localStorage不兼容IE6~8
    2、cookie存储内容的大小是有限制的，一般同源下只能存储4KB的内容，localStorage存储的内容也有大小限制，一般同源下只能存储5MB；
    3、cookie有过期时间，localStorage是永久性的，
    4、用户可能处于安全的角度禁用cookie(无痕浏览)，但是不能禁止localStorage
    

    真实项目中的本地存储都是用那些东西
    cookie：记住用户名密码或者自动登录；用户的部分信息，当用户登录成功后，我们会把用户的一些信息记录到本地cookie中，这样在项目中的任何页面都可以知道当前都可以知道当前登录的用户是哪一个了...(存储少量信息或者是需要浏览器金融的都需要使用cookie来进行存储)
    localStorage：我们可以存储某一个JS或者css中的源代码；还可以把一些不需要更新的数据存储到本地，存储的时候可以设置一个存储的时间，以后重新刷新页面，看一下时间有没有超过预定的时间，如果已经超过了，我们重新获取最新数据，没超过我们使用本地数据；
    
    本地存储都是明文存储
    对于重要的信息我们一般不要存储到本地，如果非要存储的话我们需要把存储的信息进行加密
        可逆转加密：加密完成还可以解密回来
        不可逆转加密：MD5

javascript之本地缓存

猜你喜欢