localstorage

一、Web本地存储 【含义说明】 localStorage （长期存储）：浏览器关闭后，数据一直存在，不会被清除，即没有时间限制。 seesionStorage （临时存储）：针对每一个session进行数据存储。只有当浏览器关闭窗口后，数据才会被清除。 注意：本地存储都是不能跨域访问的 【使用方法】 1. 保存数据到本地 const info = { name: 'Lee' , age: 20 , id: '001' }; sessionStorage.setItem( 'key' , JSON .stringify(info)); localStorage.setItem( 'key' , JSON .stringify(info)); 2. 从本地存储获取数据 var data1 = JSON .parse(sessionStorage.getItem( 'key' )); var data2 = JSON .parse(localStorage.getItem( 'key' )); 3. 本地存储中删除某个保存的数据 sessionStorage.removeItem( 'key' ); localStorage.removeItem( 'key' ); 4. 删除所有保存的数据 sessionStorage.clear(); localStorage.clear(); 5

1 基于 local storage 实现的信息传递 相关插件 lsbridge.js https://github.com/krasimir/l... 且项目中有非常简单易懂的示例 你需要了解的一些关于LocalStorage的特性： 只有相同域名的页面才能互相读取 LocalStorage 每个域名 localStorage 最大存储量为 5Mb 左右（每个浏览器不一样） LocalStorage 永久有效，除非用户主动清理缓存 localStorage只能存String类型的字符串 这种方案简单易用，且不需要后端的支持，但无论前端是使用哪种本地存储方式，都只能基于统一浏览器中使用，并且在某些数据量较大的可视化项目中这种方式其实不太适用，如果需要跨终端互动或者大数据量支持，则可以使用websocket实现。 2 websocket 关于websocket 的资料已经很多，这里就不多介绍。需要注意的问题就是做好用户控制。 已有案例： http://stage.moneplus.cn/ice/ ，手机扫描左上方二维码进入，摇动手机模拟冰块掉落，在pc 上面的杯子接入掉落的冰块 来源：博客园 作者： javascript痴痴 链接：https://www.cnblogs.com/homehtml/p/11803540.html

可以在聊天页面的created生命周期里面写如下代码，使得刷新后的页面和之前的是一样的 created(){ alert(11) //在页面加载时读取localStorage里的状态信息 localStorage.getItem("userMsg") && this.$store.replaceState(JSON.parse(localStorage.getItem("userMsg"))); //在页面刷新时将vuex里的信息保存到localStorage里 window.addEventListener("beforeunload",()=>{ localStorage.setItem("userMsg",JSON.stringify(this.$store.state)) }) }, 来源：博客园 作者： 指尖流年1218 链接：https://www.cnblogs.com/renxiao1218/p/11547789.html

1.cookie 特点： 大小4K； 生命周期默认会话级别，一旦关闭浏览器，数据销毁，可以设置过期时间； 在同一个网站，多个页面可以共享； 请求时会将cookie中的数据携带； 缺点：大小4K，操作麻烦 2.sessionStorage 特点： 一旦关闭浏览器，数据就销毁； 不能在多个页面共享； 大小为5M 3.localStorage 特点： 永久存储； 可以在多个窗口共享数据； 大小5M 操作： 设置：localStorage.setItem(key,value) 获取：localStorage.getItem(key) 删除：localStorage.removeItem(key) 清除：localStorage.clear（） 来源：博客园 作者： 宅到深夜 链接：https://www.cnblogs.com/zhaodz/p/11523677.html

最近学习了本地存储几种方式各自的特点和区别，遂记录下来，以加深印象。 一、cookie cookie算是比较早的技术，最初是为了 记录http的状态 ，提高访问速度。cookie是 服务器 "种植"在 客户端 的key-value形式文本文件。但同时客户端也能操作cookie。 特点 ： 大小：cookie的大小限制在4k。每个域名下cookie的个数现在在20个。 在客户端请求服务器端和服务器响应时，cookie始终被携带在http请求中，即使不需要(造成流量浪费)。这也是限制cookie大小的原因。 客户端可以通过document.cookie操作cookie，并不安全。 cookie可以设置过期时间、路径、域和 httpOnly 等字段。如果设置了过期时间，cookie会保存在硬盘里，知道到了设定的过期时间才会失效。若未设置过期时间，在浏览器窗口关闭时，cookie就失效了。路径和域两个字段限制了cookie的作用范围。 httpOnly 设置为true，则js不能通过 document.cookie 操作cookie。 二、localStorage 它也是采用key-value的形式存储数据，但是它与cookie有很大的区别 特点 ： 对比着来，localStorage能保存 更大 的数据，标准浏览器是5Mb。 localStorage保存在客户端， 不随着请求发送给服务器

Vue在发起跨域请求时，后端已经开启CORS，前端需要也携带cookie，此时需要在前端请求头加上 withCredentials: true ，表示请求可以携带cookie，例如以下为用户注册部分代码。 axios . post ( this . host + '/users/' , { username : this . username , password : this . password , password2 : this . password2 , mobile : this . mobile , sms_code : this . sms_code , allow : this . allow . toString ( ) } , { responseType : 'json' , withCredentials : true } ) . then ( response => { // 记录用户的登录状态 sessionStorage . clear ( ) ; localStorage . clear ( ) ; localStorage . token = response . data . token ; localStorage . username = response . data . username ; localStorage . user_id

1.前后端分离后，前端登录状态保持一般采用webstorage或是cookie来保存token或用户信息的方式来维持登录状态。如果webstorage或是cookie中没有token，则前端认为是没有登录，拦截到登录页面。vue中利用路由的beforeEach实现，可在main.js中做如下逻辑： // 路由判断登录 根据路由配置文件的参数 router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requireAuth)){ // 判断该路由是否需要登录权限 if (localStorage.token) { // 判断当前的token是否存在 ； 登录存入的token next(); } else { console.log('需要登录'); next({ path: '/login', query: {redirect: to.fullPath} // 将跳转的路由path作为参数，登录成功后跳转到该路由 }) } } else { next(); } }); router中配置，通过meta指定路由是否需要登录校验标识 export default new Router({ routes: [ { path: '/login', name: 'login',

【WebStorage篇】 用户登录状态、计数器或者小游戏等，但是又不希望用到数据库，就可以利用Web Storage技术将数据存储在用户浏览器中。 Web Storage是一种将少量数据存储在客户端(Client)磁盘的技术。 在网页没有Web Storage之前，其实已经有在客户端存储少量数据的功能，称为Cookie，两者有一些不同和相同之处。 使得安全性降低；而Web Storage纯粹运行于客户端，不会出现这样的问题。 Web Storage提供两种方式将数据保存在客户端：一种是 localStorage，另一种是sessionStorage，两者的差异在于生命周期和有效范围。 localStorage的生命周期及其有效范围与Cookie类似，它的生命周期由网页程序设计者自行指定，不会随着浏览器的关闭而消失，适合于在数据需要分页或跨窗口的场合。关闭浏览器之后除非主动清除数据，否则localStorage数据会一直存在；sessionStorage在关闭浏览器窗口或分页(tab)后数据就会消失，数据也仅对当前窗口或分页有效，适合于暂时保存数据的场合。 在HTML5标准中，Web Storage只允许存储字符串数据，有下列3种可供选择的访问方法： (3-1) Storage对象的setItem和getItem方法 存储使用setItem方法： window

一、cookie存储和取出： （1）存储： ------------------- **在loadURL之前调用** -------------------- /** * 同步一下cookie */ public void synCookies(String url) { CookieManager cookieManager = CookieManager.getInstance(); cookieManager.setAcceptCookie(true); cookieManager.acceptCookie(); cookieManager.removeSessionCookie();// 移除 cookieManager.removeAllCookie(); /** * cookies是在HttpClient中获得的cookie */ String token = (String) SpUtils.getParam(getApplicationContext(), Constant.TOKEN, "'"); String phone = (String) SpUtils.getParam(getApplicationContext(), Constant.PHONENUMBER, "'"); if (TextUtils.isEmpty(token)) { return; }

项目 ：移动端H5电商项目 痛点 ：慢！！！ 初始方案 ：最基本的图片懒加载，静态资源放到cdn，predns等等已经都做了。但是还是慢，慢在哪？ 显而易见的原因 ：由于前后端分离，所有的数据都由接口下发，之后根据模板渲染页面。也就是说，我们需要先加载js，等到js加载完毕之后，请求接口，接口返回数据之后，渲染页面，加载图片等等。尽管使用了模块化的加载方式，但是对于要求高的首页和活动页，给用户的感知也不是很好。 最初，由于时间紧迫，基本上都是从客户端作优化处理，基本上可以总结为以下几个方面。 我们做了本地缓存优化的策略，第一次请求之后就把接口数据缓存到localStorage里面，并且存储当时的时间，设定过期时间，一般设置为5分钟，用户在5分钟内重复打开页面，不会再次请求接口，从localstorage中拿取数据，直接渲染页面。 后续干脆把模板渲染好的html片段存储了起来，直接拼接，省去了模板计算的时间。 基本实现方案如下： var cache = localStorage.getItem('cache') , expires = 5 * 60 * 1000 ; // 判断是否过期 function isOverdue(pastTime, expires) { return Date.now() - pasttime >= expires; } if (cache &&